
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&display=swap');
*{box-sizing:border-box}body{margin:0;background:#fbf3ea;color:#342f32;font:700 15px Nunito,system-ui,sans-serif;--panel:#fffaf4;--line:#eadacc;--accent:#ed719e;--soft:#f8e5ed;--ink:#342f32}body.space{background:#11172e;color:#eef0ff;--panel:#1c2440;--line:#374061;--accent:#83e6ef;--soft:#303653;--ink:#eef0ff}button,input{font:inherit}button{cursor:pointer;color:inherit}header{max-width:1200px;margin:auto;padding:24px 22px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:27px;font-weight:900;letter-spacing:-1px;color:var(--accent)}.brand small{display:block;font-size:11px;letter-spacing:1px;color:var(--ink)}button{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 16px;min-height:44px}.theme{font-size:12px}main{max-width:1200px;margin:auto;padding:0 22px 30px}.intro{display:flex;justify-content:space-between;align-items:end;margin:6px 0 20px}h1{font-size:34px;letter-spacing:-1.3px;margin:0 0 5px}.intro p{margin:0;opacity:.65;font-weight:500}.tag{font-size:11px;border:1px solid var(--line);padding:9px;border-radius:30px}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,1fr);gap:24px}.studio{min-width:0}.frame{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:12px;box-shadow:0 12px 36px #49303f0c}.frame canvas{width:100%;display:block;border-radius:18px;aspect-ratio:1/1}.badge{position:absolute;left:24px;top:24px;background:#fff9e9e8;color:#343032;border-radius:30px;font-size:11px;padding:8px 12px}.caption{display:flex;justify-content:space-between;padding:14px 6px;font-size:12px;opacity:.7}.editor{background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:18px;align-self:start}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:14px;overflow:auto}.tabs button{flex:1;padding:10px 7px;border:0;background:transparent;font-size:12px;white-space:nowrap}.tabs button.active{background:var(--soft);color:var(--accent)}h2{font-size:15px;margin:22px 0 12px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.option{font-size:12px;padding:13px 6px;min-height:62px}.option span{display:block;font-size:22px;margin-bottom:5px}.selected{border:2px solid var(--accent)!important;background:var(--soft)!important}.swatches{display:flex;gap:12px;flex-wrap:wrap}.swatch{border-radius:50%;width:40px;height:40px;min-height:40px;padding:0;border:4px solid var(--panel);outline:1px solid var(--line)}.swatch.selected{outline:2px solid var(--accent);background:var(--color)!important}.actions{display:flex;gap:8px;margin-top:22px}.primary{background:var(--accent);color:#232638;border:0;flex:1;font-weight:900}.hint{font-size:12px;font-weight:500;opacity:.65;line-height:1.6}.strip{display:none;background:var(--panel);padding:12px;border:1px solid var(--line);border-radius:20px;margin-top:14px}.strip canvas{width:100%;display:block;border-radius:12px}.strip.show{display:block}.download{width:100%;margin-top:12px;background:var(--soft)}footer{text-align:center;padding:25px;font-size:12px;opacity:.65}.textinput{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);color:var(--ink)}.status{min-height:20px;font-size:12px;margin-top:10px;color:var(--accent)}@media(max-width:760px){header{padding:15px 16px}.brand{font-size:23px}main{padding:0 12px 90px}.intro{margin:5px 5px 16px}h1{font-size:25px}.intro p{font-size:12px}.tag{display:none}.workspace{display:flex;flex-direction:column;gap:10px}.frame{padding:8px;border-radius:22px}.frame canvas{width:min(100%,45vh);height:auto;max-height:none;margin-inline:auto}.caption{padding:8px 5px}.editor{width:100%;padding:12px;border-radius:20px}.tabs{padding-bottom:8px}.tabs button{min-height:48px}.actions{position:fixed;bottom:0;left:0;right:0;background:var(--panel);padding:12px 16px calc(12px + env(safe-area-inset-bottom));margin:0;border-top:1px solid var(--line);z-index:5}.grid{grid-template-columns:repeat(3,1fr)}h2{margin-top:16px}.option{min-height:54px;padding:8px}.option span{font-size:19px}.hint{margin-bottom:0}footer{padding-bottom:95px}}

body{background-color:#fff4e9;background-image:radial-gradient(circle at 8% 15%,#f4cbdc55 0,transparent 24%),radial-gradient(circle at 90% 70%,#c7e7dc66 0,transparent 30%);--accent:#ee72a0;--soft:#ffe2ee;--line:#ead3c4;--panel:#fff9f1}.brand{font-weight:900;text-shadow:1px 2px #fff}.frame{border:2px solid #ecc9d3;box-shadow:0 14px 40px #ba71881a}.editor{background:linear-gradient(140deg,var(--panel),#fff3e9);box-shadow:0 8px 30px #ba71880a}.space .editor{background:var(--panel)}.primary{background:linear-gradient(120deg,#fa8bb8,#ef689d);color:white;box-shadow:0 4px 0 #d25587}.space .primary{background:var(--accent);color:#17203b;box-shadow:none}.tabs button.active{box-shadow:inset 0 0 0 1px #f3a0bc}.option{background:#f7eade}.space .option{background:var(--panel)}button:hover{filter:brightness(.98)}button:focus-visible,input:focus-visible{outline:3px solid #ab87d1;outline-offset:3px}.selected{border-color:#ed6fa1!important}.frame canvas{touch-action:none}.previewtools{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.previewtools button{flex:1;font-size:12px}.upload{display:block;width:100%;background:var(--soft);border:2px dashed #e2a5bd}.range{width:100%;accent-color:#ef79a6;min-height:36px}.smallrow{display:flex;gap:8px}.smallrow button{flex:1}.stickerHint{font-size:12px;opacity:.7}.thumbstrip{display:flex;gap:7px;margin:12px 0}.thumbstrip canvas{width:calc(25% - 6px);border:5px solid #f8cade;border-radius:10px}.dustlabel{font-size:11px;color:#bd728d;letter-spacing:2px}.theme{border-radius:25px}input[type=file]{display:none}@media(max-width:760px){.tabs button{min-width:56px}.intro h1{font-size:28px}.editor{padding:12px}.frame canvas{max-height:none}.workspace .studio{width:100%}.badge{left:18px;top:18px}}
.editor{min-width:0}.face-tray{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft);padding:3px 0 8px}.face-tray .grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/3);gap:8px}.face-tray .option{min-width:0;overflow-wrap:anywhere}.face-browse{display:flex;align-items:center;gap:10px;margin:8px 0}.face-browse input{min-width:0;flex:1;accent-color:var(--accent)}.face-browse button{padding:6px 12px}.face-tray canvas{max-width:100%;height:auto!important}
.editor .grid{min-width:0}.option{min-width:0;overflow-wrap:anywhere}.option canvas{max-width:100%;height:auto!important;object-fit:contain}.tabs button{flex:0 0 auto;min-width:52px}.frame canvas{touch-action:none}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cat-placement{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.pose-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.pose-heading button{font-size:12px;padding:6px 12px}.cat-placement label{display:flex;justify-content:space-between;font-size:12px;margin-top:10px}.cat-placement input{width:100%;height:32px;margin:4px 0;accent-color:var(--accent)}.pose-ends{display:flex;justify-content:space-between;font-size:10px;opacity:.65}.cat-placement output{color:var(--accent)}

@media(max-width:760px){
body{height:100dvh;overflow:hidden}header{height:55px;padding:6px 12px}.brand{font-size:20px}.brand small{font-size:9px}.theme{padding:6px 10px;font-size:11px}main{height:calc(100dvh - 135px - env(safe-area-inset-bottom));padding:0 10px}.intro,footer{display:none}.workspace{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 44px 60px minmax(0,1fr);gap:6px}.workspace .studio,.workspace .editor{display:contents}.workspace .frame{grid-row:1;padding:5px;display:flex;justify-content:center;background:var(--panel);border-radius:18px}.workspace .frame canvas{width:min(100%,36dvh);height:auto;max-height:none;border-radius:12px}.badge{font-size:9px;padding:5px 8px;left:12px;top:12px}.previewtools{grid-row:2;margin:0;flex-wrap:nowrap;gap:6px}.previewtools button{padding:5px;font-size:11px;min-width:0}.tabs{grid-row:3;margin:0;padding:3px 0 5px;background:var(--panel);border-radius:12px;overflow-x:auto;overscroll-behavior-x:contain}.tabs button{min-height:48px;padding:4px 10px;min-width:58px}.workspace #controls{grid-row:4;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:0 10px 16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;scrollbar-width:thin}.workspace #controls h2{margin:12px 0 8px}.workspace .cat-placement{display:none;grid-row:4;min-height:0;overflow-y:auto;margin:0;padding:10px 14px}.workspace:has([data-tab="Pose"].active) .cat-placement{display:block}.workspace:has([data-tab="Pose"].active) #controls{display:none}.studio>.caption,.studio>.thumbstrip{display:none}.editor>.hint,.editor>.status{display:none}.actions{height:74px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.strip.show{position:fixed;inset:10px 10px calc(85px + env(safe-area-inset-bottom));margin:0;overflow-y:auto;z-index:20;box-shadow:0 0 0 100vmax #30263899}.result-close{display:block;width:100%;margin-bottom:10px}
}
@media(max-width:760px) and (max-height:700px){.workspace .frame canvas{width:30dvh}}
@media(max-width:760px) and (max-height:500px){.workspace .frame canvas{width:24dvh}.workspace{grid-template-rows:auto 44px 55px minmax(0,1fr)}}
.scene-thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:9px;margin:auto}.option[data-key="scene"]{padding:6px;font-size:11px}.option[data-key="scene"] span{margin-bottom:6px}
.save-actions{display:flex;gap:8px}.save-actions button{flex:1;min-width:0}.actions #undo,.actions #redo{padding:8px;font-size:12px}.actions #random{padding:8px;min-width:44px}.actions .primary{padding:8px;font-size:13px}

.mart-return{display:block;font-size:11px;color:var(--ink);text-decoration:none;margin-bottom:3px}@media(max-width:760px){.brand small{display:none}.mart-return{font-size:10px;margin:0}}

@media(max-width:760px){.editor>.status:not(:empty){display:block;position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:6;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 10px;pointer-events:none}}
