:root{font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif;color:#272232;background:#f6f2fb}*{box-sizing:border-box}body{margin:0}.shell{max-width:680px;margin:0 auto;padding:18px 14px 34px}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800;color:#7563a6}h1{font-size:clamp(20px,5vw,26px);margin:8px 0}header p{font-size:13px;color:#6b6275;line-height:1.6;margin:0 0 14px}.mode{display:flex;gap:7px;margin:12px 0}.mode button{flex:1;min-width:0}button{border:1px solid #d5cde5;border-radius:12px;padding:11px 12px;min-height:44px;background:white;color:#413a51;font-size:13px;font-weight:700;cursor:pointer}button:disabled{opacity:.47;cursor:not-allowed}.mode .selected,.primary{background:#6d5aab;color:white;border-color:#6d5aab}.primary{width:100%}.stage{position:relative;height:min(96vw,480px);min-height:290px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 28%,#fff 0%,#eee7fc 50%,#dedaf0 100%);border:1px solid #ddd4ed}.stage canvas,.stage img{position:absolute;inset:0;width:100%;height:100%}.stage img{object-fit:contain;padding:6px}.stage-message{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:24px;color:#6e608b}.stage-message strong{font-size:17px;color:#4d3b78}.stage-message span{font-size:12px;line-height:1.6}.orb{font-size:50px;color:#9881c6}.model-tag{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.88);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;color:#574d6b}.status{display:flex;align-items:center;gap:8px;min-height:45px;font-size:12px;color:#64566e}.dot{width:8px;height:8px;border-radius:50%;background:#b2aabc;flex-shrink:0}.dot.ok{background:#3b9d83}.dot.fail{background:#d45973}#statusText{flex:1;line-height:1.4}#fps{font-variant-numeric:tabular-nums;white-space:nowrap}.controls{background:#fff;border-radius:16px;padding:14px;border:1px solid #ebe5f4}.fine{font-size:11px;line-height:1.65;color:#70677a}.fine a,footer a{color:#604ba7}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.controls>label,details label{font-size:12px;font-weight:700;display:block;margin:14px 0 7px}.chatline{display:flex;gap:7px}.chatline input{min-width:0;flex:1}input[type=text],input[type=url],.chatline input{border:1px solid #d9cfeb;border-radius:10px;padding:11px;font-size:14px;background:#faf8fd}.chatline button{white-space:nowrap}.settings{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12px;color:#5b5270}.settings label{display:flex;align-items:center;gap:5px}details{border:1px solid #e1d8ef;background:#fff;border-radius:14px;padding:14px;margin:12px 0;font-size:13px;line-height:1.6}details summary{font-weight:700;cursor:pointer}details input{display:block;width:100%;margin:6px 0}footer{font-size:11px;color:#756d7c;line-height:1.7;margin-top:14px}@media(max-width:360px){.shell{padding:12px 9px 25px}.chatline{flex-direction:column}.chatline button{width:100%}}

.stage-message[hidden],img[hidden]{display:none!important}

.custom-section{background:#fff;border:1px solid #e4d9f2;border-radius:16px;padding:16px;margin-top:14px} .custom-section h2{font-size:17px;margin:0 0 7px;line-height:1.4}.custom-section h2 small{font-size:11px;color:#776985;font-weight:500;display:block;margin-top:2px}.custom-section h3{font-size:13px;margin:16px 0 8px}.expression-grid,.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.motion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.expression-grid button,.motion-grid button{min-width:0;padding:9px 4px}.expression-grid button.chosen,.motion-grid button.chosen{border-color:#6d5aab;background:#f1ecfb;color:#58439f}.control-row{display:grid;gap:6px}.control-row label{font-size:12px;font-weight:700}.control-row input{width:100%;accent-color:#6d5aab}.control-row output{float:right;font-variant-numeric:tabular-nums}.custom-section>label{font-size:12px;font-weight:700;display:block;margin:12px 0 7px}.custom-section select{width:100%;border:1px solid #d9cfeb;border-radius:10px;background:#faf8fd;padding:12px;font-size:16px}.stage.scene-sky{background:radial-gradient(circle at 50% 25%,#fff 0%,#e5f4ff 49%,#b7ddee 100%)}.stage.scene-cream{background:radial-gradient(circle at 50% 25%,#fff 0%,#fff3df 45%,#f0dac6 100%)}.stage.scene-slate{background:radial-gradient(circle at 50% 25%,#fff 0%,#e8eaf0 49%,#cbd1dc 100%)}.footnote{border-top:1px solid #eee7f4;padding-top:10px;margin-top:10px}@media(max-width:360px){.expression-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v2.4 mobile usability: keep a compact, correctly sized avatar preview in sight */
.preview-dock{position:relative;min-width:0}
.dock-actions{display:flex;gap:7px;align-items:center;justify-content:space-between;margin-bottom:8px}
.dock-actions .actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:1;gap:6px;margin:0}
.dock-actions .actions button{font-size:11px;padding:8px 4px;white-space:nowrap;min-height:40px}
.reset-zoom{flex:none;font-size:11px;padding:8px;min-height:40px}
.demo-chat{margin-top:14px;padding:16px;background:white;border:1px solid #e4d9f2;border-radius:16px}
.demo-chat h2{font-size:17px;margin:0 0 7px}.demo-chat h2 small{font-size:11px;display:block;font-weight:500;color:#776985}
.demo-log{max-height:205px;overflow-y:auto;border:1px solid #eee7f4;background:#faf8fe;border-radius:12px;padding:10px;display:flex;gap:7px;flex-direction:column}
.demo-message{max-width:94%;padding:9px 11px;line-height:1.45;font-size:13px;border-radius:12px;overflow-wrap:anywhere}
.demo-message.user{background:#e6edfb;align-self:flex-end}.demo-message.yuni{background:white;align-self:flex-start;border:1px solid #eadff5}
.demo-message small{display:block;color:#70657d;margin-bottom:3px;font-size:10px;font-weight:700}
.demo-form{display:flex;gap:8px;margin-top:10px}.demo-form input{min-width:0;flex:1;width:100%;border:1px solid #d9cfeb;border-radius:10px;padding:12px;font-size:16px;background:white}
.demo-samples{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.demo-samples button{flex:1;min-width:82px;font-size:12px;padding:8px 6px}
.short-note{margin:0 0 8px}
@media(max-width:700px){
  .preview-dock{position:sticky;top:4px;z-index:30;background:#f6f2fb;padding:5px 0 7px;box-shadow:0 8px 14px -16px #372751}
  .stage{height:clamp(190px,34svh,276px);min-height:0;border-radius:15px}
  .model-tag{font-size:10px;top:7px;left:8px;padding:5px 7px}
  .status{min-height:34px;font-size:11px}
  .dock-actions .actions button{font-size:10.5px;padding:6px 2px}
  .reset-zoom{font-size:10.5px;padding:6px}
  .shell{padding-top:10px}
}
@media(max-width:360px){
  .dock-actions{gap:4px}.dock-actions .actions{gap:3px}
  .dock-actions .actions button{font-size:10px;letter-spacing:-.03em}
  .reset-zoom{font-size:10px}
}
@media(max-height:640px) and (max-width:700px){.stage{height:190px}}

/* v2.5 one-voice controls and optional AI configuration */
.voice-panel{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin-top:10px}.voice-panel label{font-size:12px;font-weight:700;width:100%}.voice-panel select{min-width:0;flex:1;border:1px solid #d9cfeb;border-radius:10px;background:#faf8fd;padding:10px;font-size:14px;min-height:44px}.voice-panel button{flex:none}.voice-info{border-radius:9px;background:#f1edf8;padding:9px 10px}
.ai-settings{margin-top:14px}.ai-settings label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px}.ai-settings input[type=url],.ai-settings input[type=password]{border:1px solid #d9cfeb;border-radius:9px;min-height:44px;padding:11px;font-size:16px;width:100%;box-sizing:border-box}.ai-settings .ai-switch{display:flex;align-items:center;gap:8px}.ai-settings .ai-switch input{width:20px;height:20px;accent-color:#6d5aab}