:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24324d;background:#edf1f8;font-synthesis:none;--muted:#7c899f;--accent:#526ee9}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;transition:background .18s,transform .18s,color .18s}button:active{transform:scale(.97)}button:focus-visible,input:focus-visible{outline:3px solid #8ca0f9;outline-offset:3px}input[type=checkbox]{accent-color:var(--accent)}.topbar{height:76px;display:flex;justify-content:space-between;align-items:center;padding:0 38px;background:#f6f8fc}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:14px;color:#6c7a92}.brand strong{font-size:24px;letter-spacing:-1.2px;color:#24324d}.brand-symbol{font-weight:700;font-size:27px;line-height:34px;text-align:center;color:#fff;background:#6c83ec;width:36px;height:36px;border-radius:13px;transform:rotate(-8deg)}.divider{height:20px;width:1px;background:#dce2ed;margin:0 4px}.live{display:flex;align-items:center;gap:9px;color:#7b879b;font-size:12px}.live-dot{width:6px;height:6px;background:#6bba9b;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #6bba9b12;flex-shrink:0}.refresh{display:flex;align-items:center;gap:5px;margin-left:14px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:14px;margin:14px 24px;max-width:1700px;min-height:calc(100vh - 146px)}.studio{position:relative;border-radius:28px;background:radial-gradient(ellipse at 53% 48%,#fbfdff 0,#e7edf8 64%,#e3e9f4 100%);overflow:hidden;min-height:690px}.studio-heading{position:absolute;left:36px;top:32px;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:#8490a6}h1{font-weight:550;font-size:clamp(26px,2.8vw,43px);line-height:1.12;letter-spacing:-1.8px;margin:12px 0}h1+p{font-size:12px;color:#8390a4;margin-top:13px}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none}.scene-tools{position:absolute;top:30px;right:26px;display:flex;gap:7px}.scene-tools button{padding:10px 13px;background:#ffffff9e;border-radius:13px;font-size:11px;color:#75829a;backdrop-filter:blur(15px)}.scene-tools button:first-child{font-size:20px;line-height:14px}.character-caption{position:absolute;left:36px;bottom:76px;display:flex;align-items:center;gap:13px;pointer-events:none}.caption-line{height:37px;width:3px;border-radius:3px;background:#7caef2}.character-caption strong{font-weight:550;font-size:19px;letter-spacing:-.5px;display:block}.character-caption div>span{font-size:11px;color:#8a97aa;display:block;margin-top:5px}.stage-bottom{position:absolute;bottom:26px;left:36px;right:26px;display:flex;align-items:center;gap:18px;font-size:10px;color:#8996ab}.stage-bottom>span{margin-right:auto}.stage-bottom label{display:flex;gap:5px;align-items:center}.controls{background:#fafbfe;border-radius:24px;padding:25px 24px;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.panel-heading h2{font-size:23px;letter-spacing:-.9px;font-weight:550;margin:7px 0 0}.version{font-size:10px;padding:6px 8px;background:#edf0fa;color:#8b96b2;border-radius:8px}.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.role-button{background:#f0f3f9;padding:12px 4px 10px;display:flex;align-items:center;flex-direction:column;gap:7px;border-radius:14px;color:#8a96aa;font-size:9px;min-height:66px}.role-button svg{width:21px;height:21px;stroke-width:1.5}.role-button.active{background:#e8edff;color:#5270d6}.role-button:hover{background:#e9eef7}.control-section{padding-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.section-title h3{font-size:11px;font-weight:600;margin:0}.section-title>span{font-size:7px;letter-spacing:1px;color:#9aa5b8}.seed-row{display:flex;gap:6px}.seed-row input{min-width:0;width:100%;border:0;background:#edf1f8;padding:10px 12px;border-radius:11px;color:#62718e;font-family:ui-monospace,monospace;font-size:11px}.seed-row button{padding:6px 13px;font-size:21px;border-radius:11px;background:#e8edf9;color:#5d75cb}.hint{font-size:9px;color:#98a3b5;margin:7px 0 0}.swatches{display:flex;gap:9px;align-items:center;padding:1px 0 12px}.swatch{width:26px;height:26px;border-radius:50%;position:relative;background:var(--swatch);box-shadow:inset 0 3px 5px #ffffff70}.swatch.active:after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--swatch);border-radius:50%}.material-modes{background:#edf1f8;padding:3px;border-radius:10px;display:flex;gap:3px}.material-modes button{flex:1;font-size:9px;color:#8a97ab;background:transparent;padding:7px 4px;border-radius:8px}.material-modes button.active{background:#fff;color:#556886}.range-label{display:grid;grid-template-columns:1fr auto;gap:5px;font-size:10px;color:#8894a9;margin-bottom:9px}.range-label output{font-family:ui-monospace,monospace;font-size:9px;color:#9aa7bc}.range-label input{grid-column:1/3;width:100%;height:14px;margin:0;accent-color:#7c92e7;cursor:pointer}.text-button{font-size:9px;color:#8c99b0;background:transparent;padding:0}.expression-section .section-title label{display:flex;gap:4px;align-items:center;font-size:9px;color:#95a0b2}.expressions{display:flex;gap:5px;flex-wrap:wrap}.expressions button{font-size:9px;padding:7px 9px;background:#eef1f7;color:#8a97ac;border-radius:9px}.expressions button.active{background:#e7edff;color:#6179cc}.export-row{display:flex;gap:6px;padding-top:22px;margin-top:auto}.export-row button{background:#edf0f8;color:#8b98af;border-radius:11px;padding:11px;font-size:10px}.export-row .primary{background:#6079e8;color:white;flex:1}.export-row button:disabled{opacity:.5;cursor:wait}#notice{height:14px;padding-top:7px;font-size:9px;color:#8290a7}.progress-footer{display:flex;gap:14px;align-items:center;padding:4px 32px 16px;font-size:10px;color:#9aa6b8}.progress-footer>div:first-child{display:flex;gap:8px;align-items:center;flex:1}.progress-track{height:3px;width:110px;background:#dfe5f0;border-radius:3px}.progress-track i{height:3px;background:#8fa2e9;display:block;border-radius:3px;transition:width .6s}.progress-footer>span{min-width:30px;text-align:right}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;color:#93a1b8;font-size:12px}.loading-orb{height:90px;width:90px;border-radius:43% 57% 48% 50%;background:radial-gradient(circle at 30% 30%,#eff9ff,#93bbff);box-shadow:0 15px 35px #6f94ce22;animation:breathe 2s ease-in-out infinite}@keyframes breathe{50%{transform:translateY(-12px) rotate(8deg)}}
@media(min-width:1700px){.workspace{margin-left:auto;margin-right:auto}}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 315px;margin:12px;gap:10px}.controls{padding:23px 20px}.studio-heading{left:25px;top:27px}.studio-heading h1{font-size:30px}.studio-heading h1+p{max-width:190px;line-height:1.6}.stage-bottom>span{display:none}.scene-tools{right:20px}.topbar{padding:0 24px}.live #build-label{display:none}}@media(max-width:760px){.topbar{height:64px;padding:0 18px}.brand{gap:9px;font-size:12px}.brand strong{font-size:21px}.brand-symbol{width:30px;height:30px;line-height:29px;font-size:24px}.refresh{margin-left:0}.live-dot+.refresh{margin-left:0}.workspace{display:flex;flex-direction:column;margin:8px;gap:8px}.studio{height:560px;min-height:560px;border-radius:23px}.studio-heading{left:22px;top:24px}.studio-heading h1{font-size:28px}.studio-heading h1+p{font-size:10px;max-width:180px}.scene-tools{top:23px;right:18px}.scene-tools button{font-size:9px;padding:9px}.character-caption{left:23px;bottom:68px}.stage-bottom{left:23px;bottom:22px}.stage-bottom>span{display:block;font-size:8px}.stage-bottom{gap:9px;font-size:9px}.controls{padding:25px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.panel-heading,.roles,.export-row,#notice{grid-column:1/3}.roles{grid-template-columns:repeat(6,1fr)}.role-button{font-size:8px}.control-section.anatomy{grid-column:2;grid-row:3/5}.control-section.expression-section{grid-column:1/3}.progress-footer{padding:6px 18px 16px;font-size:9px}.progress-track{width:65px}.studio.gallery-mode .studio-heading{display:none}}@media(max-width:390px){.roles{grid-template-columns:repeat(3,1fr)}.controls{gap:0 15px}.brand .divider,.brand .divider+span{display:none}.stage-bottom>span{display:none}}
