:root{--pink:#ec4899;--pink-soft:#f9a8d4;--orchid:#c45db8;--lilac:#a78bfa;--violet:#7c3aed;--cream:#fff7fb;--surface:#fff;--ink:#2a1535;--muted:#7a6585;--border:#f0d6e8;--shadow:0 4px 18px #7c3abd1a, 0 1px 4px #ec489914;--radius:18px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Segoe UI,Avenir Next,system-ui,-apple-system,sans-serif;line-height:1.4}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100dvh;margin:0}body{background-color:#0000;background-image:radial-gradient(80% 50% at 10% -10%,#f9a8d473,#0000 55%),radial-gradient(70% 45% at 95% 5%,#a78bfa59,#0000 50%),radial-gradient(60% 40% at 50% 100%,#ec48991f,#0000 55%),linear-gradient(165deg,#fff7fb 0%,#fce7f3 40%,#f3e8ff 100%);background-position:0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box}.app{max-width:520px;min-height:100dvh;padding:calc(.65rem + var(--safe-top)) calc(.75rem + var(--safe-right)) calc(.75rem + var(--safe-bottom)) calc(.75rem + var(--safe-left));flex-direction:column;margin:0 auto;display:flex}.topbar{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.brand{flex:1;align-items:center;gap:.55rem;min-width:140px;display:flex}.brand-mark{width:44px;height:44px;box-shadow:var(--shadow), inset 0 1px 0 #ffffff8c;background:linear-gradient(145deg,#fce7f3 0%,#f9a8d4 35%,#c45db8 70%,#a78bfa 100%);border-radius:14px;place-items:center;font-size:1.35rem;display:grid}.brand h1{letter-spacing:-.03em;background:linear-gradient(120deg,#be185d,#7c3aed);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:1.35rem}.tagline{color:var(--muted);margin:0;font-size:.78rem;font-weight:600}.topbar-actions{flex-wrap:wrap;gap:.35rem;display:flex}.btn,button.btn{appearance:none;cursor:pointer;background:var(--surface);min-height:44px;color:var(--ink);box-shadow:var(--shadow);border:none;border-radius:14px;padding:.55rem .85rem;font-size:.9rem;font-weight:700;transition:transform .12s,box-shadow .12s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#fff;background:linear-gradient(135deg,#ec4899,#c45db8)}.btn-accent{color:#fff;background:linear-gradient(135deg,#a78bfa,#7c3aed)}.btn-ghost{border:1.5px solid var(--border);box-shadow:none;background:#ffffffb3}.btn-danger{color:#be123c;box-shadow:none;background:#fff1f2}.btn-sm{border-radius:10px;min-height:36px;padding:.3rem .6rem;font-size:.8rem}.btn-icon{place-items:center;width:40px;padding:0;display:grid}.stage{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.character-wrap{aspect-ratio:280/390;background:radial-gradient(circle at 50% 18%,#fffffffa,#0000 42%),radial-gradient(circle at 20% 70%,#a78bfa47,#0000 45%),radial-gradient(circle at 85% 55%,#f472b638,#0000 40%),linear-gradient(165deg,#fffafc 0%,#fce7f3 48%,#ede9fe 100%);border:1.5px solid #ffffffe6;border-radius:28px;place-items:center;width:min(100%,320px);transition:box-shadow .25s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffffd9,0 12px 40px #7c3abd2e,0 4px 12px #ec48991f}.character-wrap:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(135deg,#ffffff8c 0%,#0000 35% 65%,#7c3abd14 100%);position:absolute;inset:0}.character{z-index:0;filter:drop-shadow(0 10px 18px #4c1d952e);width:100%;height:100%;display:block;position:relative}.char-idle{transform-origin:140px 360px;animation:4.2s ease-in-out infinite char-breathe}.char-ground-shadow{transform-origin:140px 372px;animation:4.2s ease-in-out infinite shadow-pulse}@keyframes char-breathe{0%,to{transform:translateY(0)rotate(-.6deg)scale(1)}50%{transform:translateY(-3px)rotate(.6deg)scale(1.012,.992)}}@keyframes shadow-pulse{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.75;transform:scaleX(.92)}}@media (prefers-reduced-motion:reduce){.char-idle,.char-ground-shadow{animation:none}}.controls{-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);background:#ffffffc7;border:1.5px solid #ffffffe6;border-radius:22px;margin-top:.65rem;padding:.65rem}.cat-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:.35rem;padding-bottom:.45rem;display:flex;overflow-x:auto}.cat-tabs::-webkit-scrollbar{display:none}.cat-tab{min-width:64px;min-height:58px;color:var(--ink);cursor:pointer;background:#fff7fbe6;border:2px solid #0000;border-radius:14px;flex-direction:column;flex:none;align-items:center;gap:.15rem;padding:.4rem .55rem;font-size:.72rem;font-weight:700;transition:border-color .15s,background .15s,transform .12s;display:flex}.cat-tab:active{transform:scale(.96)}.cat-tab.active{border-color:var(--pink);color:#9d174d;background:linear-gradient(#fdf2f8,#f5e8ff)}.cat-emoji{font-size:1.15rem;line-height:1}.panel{-webkit-overflow-scrolling:touch;max-height:min(28vh,220px);padding:.25rem .15rem .35rem;overflow-y:auto}.option-block{margin-bottom:.65rem}.option-label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .4rem;font-size:.78rem;font-weight:800}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.45rem;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:3px solid #ffffffe6;border-radius:50%;width:100%;padding:0;transition:transform .12s,box-shadow .12s;box-shadow:0 2px 8px #2a15351f}.swatch:active{transform:scale(.94)}.swatch.active{outline:3px solid var(--orchid);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 4px 12px #c45db859}.chip-grid{flex-wrap:wrap;gap:.4rem;display:flex}.chip{border:2px solid var(--border);min-height:44px;color:var(--ink);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:.35rem;padding:.45rem .8rem;font-size:.88rem;font-weight:700;transition:border-color .15s,background .15s,transform .12s;display:inline-flex}.chip:active{transform:scale(.97)}.chip.active{border-color:var(--orchid);color:#6b21a8;background:linear-gradient(135deg,#fdf2f8,#ede9fe)}.chip-dot{border:1px solid #00000014;border-radius:50%;flex-shrink:0;width:14px;height:14px}.modal-backdrop{-webkit-backdrop-filter:blur(6px);z-index:50;padding:var(--safe-bottom) var(--safe-right) var(--safe-bottom) var(--safe-left);background:#2a153573;place-items:end center;display:grid;position:fixed;inset:0}.modal{background:var(--surface);width:min(100%,520px);max-height:min(85dvh,640px);padding:1rem 1rem calc(1.25rem + var(--safe-bottom));border-radius:24px 24px 0 0;overflow:auto;box-shadow:0 -8px 40px #2a153533}.modal-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.modal-header h2{color:#6b21a8;margin:0;font-size:1.15rem}.field{color:var(--ink);margin-bottom:.35rem;font-size:.88rem;font-weight:700;display:block}.input{border:2px solid var(--border);background:#fff7fb;border-radius:14px;width:100%;margin-bottom:.75rem;padding:.75rem .9rem;font-size:1rem}.input:focus{outline:2px solid var(--pink-soft);border-color:var(--orchid)}.form-actions{justify-content:flex-end;gap:.5rem;display:flex}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;display:grid}.gallery-card{border:1.5px solid var(--border);background:#fff7fb;border-radius:16px;overflow:hidden}.gallery-preview{cursor:pointer;background:linear-gradient(#fdf2f8,#f3e8ff);border:none;width:100%;padding:.35rem;display:block}.gallery-char{aspect-ratio:280/390;width:100%;height:auto}.gallery-meta{justify-content:space-between;align-items:center;gap:.35rem;padding:.5rem .55rem .6rem;display:flex}.gallery-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;font-weight:800;overflow:hidden}.muted{color:var(--muted)}.center-pad{text-align:center;padding:1.5rem .5rem}.toast{left:50%;bottom:calc(1.25rem + var(--safe-bottom));color:#fff;z-index:60;background:linear-gradient(135deg,#4c1d95,#9d174d);border-radius:999px;padding:.7rem 1.15rem;font-weight:700;animation:.25s pop;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #4c1d9559}@keyframes pop{0%{opacity:0;transform:translate(-50%)translateY(8px)scale(.96)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@media (width>=600px){.modal-backdrop{place-items:center}.modal{border-radius:24px;padding-bottom:1.25rem}}@media (height>=800px){.character-wrap{width:min(100%,360px)}.panel{max-height:min(30vh,240px)}}.orbit-stage{touch-action:none;-webkit-user-select:none;user-select:none;grid-template-rows:1fr auto;grid-template-columns:40px 1fr 40px;place-items:center;gap:.15rem;width:100%;height:100%;display:grid;position:relative}.orbit-viewport{perspective:900px;perspective-origin:50% 45%;cursor:grab;grid-area:1/2;place-items:center;width:100%;height:100%;display:grid;position:relative}.orbit-viewport:active{cursor:grabbing}.orbit-hint{z-index:3;letter-spacing:.04em;text-transform:uppercase;color:#7c3aed;pointer-events:none;opacity:.85;background:#ffffffbf;border-radius:999px;padding:.2rem .55rem;font-size:.68rem;font-weight:800;position:absolute;top:.45rem;left:50%;transform:translate(-50%)}.orbit-rig{width:min(100%,300px);height:100%;max-height:100%;transform-style:preserve-3d;will-change:transform;margin:0 auto;position:relative}.orbit-face{backface-visibility:hidden;place-items:center;display:grid;position:absolute;inset:0}.orbit-front{transform:rotateY(0)translateZ(2px)}.orbit-back{transform:rotateY(180deg)translateZ(2px)}.orbit-btn{border:1.5px solid var(--border);color:#6b21a8;cursor:pointer;width:40px;height:40px;box-shadow:var(--shadow);background:#ffffffd9;border-radius:14px;grid-row:1;place-items:center;padding:0;font-size:1.25rem;font-weight:800;display:grid}.orbit-btn:active{transform:scale(.95)}.orbit-left{grid-column:1}.orbit-right{grid-column:3}.orbit-reset{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;grid-area:2/1/auto/-1;min-height:28px;padding:.15rem .5rem;font-size:.72rem;font-weight:800}.chat-dock{-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);background:#ffffffd1;border:1.5px solid #ffffffe6;border-radius:18px;flex-direction:column;gap:.35rem;max-height:150px;margin:.45rem 0 .35rem;padding:.45rem .55rem .55rem;display:flex}.chat-log{-webkit-overflow-scrolling:touch;flex-direction:column;gap:.35rem;max-height:88px;padding:.15rem .1rem;display:flex;overflow-y:auto}.chat-bubble{border-radius:14px;max-width:92%;padding:.4rem .65rem;font-size:.84rem;line-height:1.35;animation:.2s pop}.chat-bubble p{margin:.1rem 0 0}.chat-who{letter-spacing:.04em;text-transform:uppercase;opacity:.7;font-size:.65rem;font-weight:800}.chat-bubble.model{color:var(--ink);background:linear-gradient(135deg,#fdf2f8,#ede9fe);border:1px solid #f0d6e8;align-self:flex-start}.chat-bubble.you{color:#fff;background:linear-gradient(135deg,#ec4899,#a78bfa);align-self:flex-end}.chat-bubble.you .chat-who{color:#ffffffd9}.chat-compose{align-items:center;gap:.3rem;display:flex}.chat-input{border:2px solid var(--border);background:#fff7fb;border-radius:12px;flex:1;min-width:0;min-height:42px;padding:.55rem .7rem;font-size:.92rem}.chat-input:focus{outline:2px solid var(--pink-soft);border-color:var(--orchid)}.chat-send{min-height:42px;padding:.45rem .75rem}.chat-mic.listening{background:#fce7f3;border-color:#ec4899;animation:1s ease-in-out infinite pulse-mic}.voice-on{background:#ede9fe!important;border-color:#a78bfa!important}@keyframes pulse-mic{0%,to{box-shadow:0 0 #ec489959}50%{box-shadow:0 0 0 6px #ec489900}}@media (height>=780px){.chat-dock{max-height:180px}.chat-log{max-height:110px}}.orbit-stage-webgl{width:100%;height:100%}.orbit-viewport-webgl{touch-action:none;cursor:grab;border-radius:20px;width:100%;height:100%;min-height:220px;overflow:hidden}.orbit-viewport-webgl:active{cursor:grabbing}.webgl-canvas{touch-action:none;display:block;width:100%!important;height:100%!important}.character-wrap .orbit-stage-webgl{width:100%;height:100%}.character-wrap{padding:0}.webgl-loading{color:#7c3aed;background:linear-gradient(165deg,#fffafc,#f3e8ff);place-items:center;width:100%;height:100%;font-size:.9rem;font-weight:800;display:grid}