:root{--canvas:#f6f7f2;--panel:#fff;--ink:#17211d;--muted:#61706b;--line:#dce3d8;--teal:#087c78;--teal-soft:#d9efeb;--coral:#d86f5d;--coral-soft:#f7dfd9;--gold:#bd8618;--gold-soft:#f5e7bf;--mint:#5ba985;--shadow:0 24px 80px #1c2b241f}*{box-sizing:border-box}body{background:linear-gradient(135deg, #d86f5d1a, transparent 34%), linear-gradient(315deg, #087c781f, transparent 38%), var(--canvas);min-height:100vh;color:var(--ink);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.studio-shell{width:min(1220px,100% - 32px);margin:0 auto;padding:26px 0 34px}.studio-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand,.engine-pill,.section-title,.source-card,.size-readout,.preview-topline,.preview-note{align-items:center;display:flex}.brand{gap:12px}.brand-icon{background:var(--teal);color:#fff;border-radius:14px;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 14px 28px #087c7838}.brand strong,.brand span{display:block}.brand span{color:var(--muted);margin-top:2px}.engine-pill,.preview-state{background:var(--teal-soft);min-height:34px;color:var(--teal);border-radius:999px;padding:0 12px;font-size:.9rem;font-weight:800}.engine-pill{gap:7px}.engine-pill.loading svg{animation:1s linear infinite spin}.engine-pill.error{background:var(--coral-soft);color:#a14232}@keyframes spin{to{transform:rotate(360deg)}}.studio-grid{grid-template-columns:376px minmax(0,1fr);align-items:stretch;gap:22px;display:grid}.control-panel,.preview-panel{box-shadow:var(--shadow);background:#ffffffe0;border:1px solid #17211d1a;border-radius:24px}.control-panel{flex-direction:column;gap:18px;padding:22px;display:flex}.preview-panel{padding:18px}.eyebrow{color:var(--teal);text-transform:uppercase;margin-bottom:4px;font-size:.78rem;font-weight:900;display:block}h1,h2,p{margin:0}h1{font-size:1.9rem;line-height:1.13}h2{font-size:1.08rem}.lede{color:var(--muted);margin-top:9px;line-height:1.5}.input-actions{grid-template-columns:1fr;gap:10px;display:grid}.upload-drop,.camera-button{border-radius:16px;justify-content:center;align-items:center;gap:10px;min-height:54px;font-weight:900;display:flex}.upload-drop{color:var(--teal);background:linear-gradient(135deg,#d9efebb8,#f5e7bf8c),#fff;border:1px dashed #087c7873;position:relative}.upload-drop.disabled,.camera-button:disabled{opacity:.58;pointer-events:none}.upload-drop input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.camera-button{border:1px solid var(--teal);background:var(--teal);color:#fff;box-shadow:0 16px 34px #087c782e}.source-card{border:1px solid var(--line);min-height:74px;color:var(--teal);background:#fbfcf8;border-radius:16px;gap:12px;padding:12px}.source-card strong,.source-card span{display:block}.source-card strong{max-width:275px;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.source-card span{color:var(--muted);margin-top:3px;font-size:.9rem;line-height:1.35}.option-group{gap:12px;display:grid}.section-title{gap:8px}.section-title svg{color:var(--teal)}.mode-grid,.face-options{gap:9px;display:grid}.export-card{background:#f8fcf8;border:1px solid #087c782e;border-radius:16px;gap:12px;padding:14px;display:grid}.export-card p{color:var(--muted);font-size:.92rem;line-height:1.45}.export-card.ready{background:#e8f5ee;border-color:#5ba9856b}.export-card.blocked,.export-card.error{background:#fff3f0;border-color:#d86f5d5c}.export-card.blocked .section-title svg,.export-card.error .section-title svg{color:#a14232}.export-button{border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:14px;justify-content:center;align-items:center;gap:9px;min-height:44px;font-weight:900;display:inline-flex;box-shadow:0 14px 28px #087c782e}.export-button:disabled{border-color:var(--line);color:var(--muted);box-shadow:none;background:#edf1ea}.export-button svg{flex:none}.export-card.exporting .export-button svg{animation:1s linear infinite spin}.mode-card,.face-option{border:1px solid var(--line);min-height:58px;color:var(--ink);text-align:left;background:#fff;border-radius:16px;align-items:center;padding:9px 10px;display:grid}.mode-card{grid-template-columns:38px 1fr;gap:10px}.mode-card svg{color:var(--teal)}.mode-card.selected,.face-option.selected{border-color:var(--teal);background:var(--teal-soft)}.mode-card strong,.mode-card small{display:block}.mode-card small{color:var(--muted);margin-top:2px}.face-option{grid-template-columns:48px 1fr;gap:10px}.mini-face{border:3px solid #fff;border-radius:50%;place-items:center;width:42px;height:42px;font-weight:900;display:grid;box-shadow:0 10px 18px #17211d1f}.size-slider{width:100%;accent-color:var(--teal)}.size-readout{color:var(--muted);justify-content:space-between}.size-readout button{border:1px solid var(--line);min-height:34px;color:var(--teal);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-weight:800;display:inline-flex}.preview-topline{justify-content:space-between;gap:12px;margin-bottom:14px}.preview-state{color:var(--muted);background:#eef1eb;align-items:center;display:inline-flex}.preview-state.active{background:var(--teal-soft);color:var(--teal)}.preview-canvas{border:1px solid var(--line);cursor:crosshair;perspective:900px;background:radial-gradient(circle at 28% 16%,#f5e7bf6b,#0000 34%),radial-gradient(circle at 82% 20%,#d86f5d2e,#0000 32%),linear-gradient(145deg,#203831,#263029 54%,#17211d);border-radius:22px;min-height:640px;position:relative;overflow:hidden}.uploaded-media{object-fit:contain;background:#111b18;width:100%;height:100%;position:absolute;inset:0}.uploaded-media.mirror{transform:scaleX(-1)}.toon-overlay{z-index:5;pointer-events:none;width:100%;height:100%;display:none;position:absolute;inset:0}.toon-overlay.visible{display:block}.empty-preview{place-items:center;display:grid;position:absolute;inset:0}.sample-person{background:var(--teal);border-radius:72px 72px 36px 36px;width:180px;height:260px;position:relative;box-shadow:0 30px 80px #0000003d}.sample-person:before{content:"";background:#f7dfd9;border:7px solid #ffffffd1;border-radius:50%;width:150px;height:150px;position:absolute;top:-96px;left:50%;transform:translate(-50%)}.cartoon-face-overlay{z-index:5;transform-style:preserve-3d;filter:drop-shadow(0 24px 36px #00000047);pointer-events:none;place-items:center;transition:width .14s,height .14s,left 90ms linear,top 90ms linear,transform 90ms linear;display:grid;position:absolute}.cartoon-face-overlay svg{transform-origin:50%;width:100%;height:100%;animation:2.4s ease-in-out infinite face-bob;overflow:visible}.cartoon-face-overlay .face-shape{filter:drop-shadow(0 1px #ffffffad)}.cartoon-face-overlay .face-outline{stroke:#ffffffe6;stroke-linejoin:round;stroke-width:7px}.cartoon-face-overlay.landmark-driven{filter:drop-shadow(0 24px 38px #00000047)saturate(1.08)}.cartoon-face-overlay.landmark-driven svg{animation-duration:1.65s}.cartoon-face-overlay.box-driven{opacity:.94}.three-overlay{z-index:6;pointer-events:none;width:100%;height:100%;display:none;position:absolute;inset:0}.three-overlay.visible{display:block}.face-box{z-index:8;pointer-events:none;border:2px solid #ffffffe0;border-radius:18px;position:absolute;box-shadow:0 0 0 9999px #087c780a,0 10px 24px #0000002e}.face-box.detected{opacity:0;border-color:#5cf0c8;transition:opacity .14s}.preview-canvas:hover .face-box.detected{opacity:.42}.face-box.detected.landmarks{border-color:#ffe27b}.face-box.manual{border-style:dashed;border-color:#f5e7bfe0}.face-box span{min-height:22px;color:var(--teal);opacity:0;background:#ffffffe6;border-radius:999px;padding:2px 8px;font-size:.78rem;font-weight:900;transition:opacity .14s;position:absolute;top:-28px;left:8px}.preview-canvas:hover .face-box span{opacity:1}@keyframes face-bob{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-2.5%)scale(1.018)}}.preview-note{background:var(--teal-soft);min-height:46px;color:var(--teal);border-radius:14px;gap:9px;margin-top:14px;padding:0 14px;font-weight:800;line-height:1.35}@media (max-width:980px){.studio-grid{grid-template-columns:1fr}.preview-canvas{min-height:560px}}@media (max-width:620px){.studio-shell{width:min(100% - 24px,1220px);padding-top:18px}.studio-header{flex-direction:column;align-items:flex-start}h1{font-size:1.58rem}.control-panel,.preview-panel{border-radius:20px;padding:16px}.preview-canvas{min-height:438px}.sample-person{width:132px;height:206px}.sample-person:before{width:116px;height:116px;top:-74px}}