:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#171717;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f7f5ef;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4}*{box-sizing:border-box}body{min-width:320px;height:100dvh;margin:0;overflow:hidden}#root{height:100dvh;overflow:hidden}button,input,select{font:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:focus-visible,select:focus-visible,a:focus-visible{outline-offset:2px;outline:2px solid #2563eb}.app{background:#f7f5ef;height:100dvh;display:grid;overflow:hidden}@media (width>=980px){.app{grid-template-columns:minmax(0,1fr) 400px}}.composition-stage{background:var(--preview-bg);height:100%;min-height:0;color:var(--preview-text);align-content:space-between;padding:clamp(20px,4vw,60px);display:grid;overflow:hidden}@media (width>=980px){.composition-stage{height:100dvh}}.stage-header,.stage-footer,.brand,.sidebar-title,.quick-actions,.quick-actions button,.group-heading,.icon-button,.action-button{align-items:center;display:flex}.stage-header,.stage-footer,.group-heading{justify-content:space-between;gap:16px}.brand,.quick-actions button,.action-button{gap:9px}.brand{letter-spacing:.08em;text-transform:uppercase;font-size:13px;font-weight:800}.composition-card{grid-template-rows:repeat(3,minmax(0,1fr));place-items:center;gap:0;width:min(100%,1080px);height:min(76vh,760px);min-height:0;padding:clamp(14px,2.8vw,38px) 0;display:grid;position:relative;overflow:visible}.original-preview,.morph-preview{color:currentColor;max-width:100%;display:block;overflow:visible}.original-preview{opacity:.5;width:100%;height:100%}.original-preview-top{transform:translateY(7%)}.original-preview-bottom{transform:translateY(-7%)}.morph-preview{width:100%;height:100%}.stage-status{text-align:center;letter-spacing:.08em;text-transform:uppercase;font-size:13px;font-weight:800;position:absolute;inset:auto 0 28px}.error-app{grid-template-columns:1fr}.error-panel{align-self:center;place-items:start;gap:14px;max-width:520px;display:grid}.error-panel h1,.error-panel p{margin:0}.error-panel h1{letter-spacing:0;font-size:clamp(34px,6vw,72px);line-height:.95}.error-panel p{font-size:16px;font-weight:700}.error-panel button{color:currentColor;letter-spacing:.04em;text-transform:uppercase;background:0 0;border:1px solid;border-radius:999px;min-height:42px;padding:0 16px;font-size:13px;font-weight:800}.error-panel button:hover{color:var(--preview-bg);background:currentColor}.stage-footer,.status-line{border-top:1px solid color-mix(in srgb, currentColor 32%, transparent);letter-spacing:.08em;text-transform:uppercase;padding-top:18px;font-size:12px;font-weight:800}.sidebar{overscroll-behavior:contain;scrollbar-color:#3a3a3a #050505;scrollbar-width:thin;color:#f7f5ef;background:#050505;border-left:1px solid #000;align-content:start;gap:18px;height:100dvh;min-height:0;padding:22px;display:grid;overflow-y:auto}.sidebar::-webkit-scrollbar{width:10px}.sidebar::-webkit-scrollbar-track{background:#050505}.sidebar::-webkit-scrollbar-thumb{background:#3a3a3a;border:2px solid #050505;border-radius:999px}.sidebar::-webkit-scrollbar-thumb:hover{background:#545454}.sidebar-title{border-bottom:1px solid #2a2a2a;gap:10px;padding-bottom:16px}.sidebar-title h1{letter-spacing:0;margin:0;font-size:22px;font-weight:780;line-height:1}.quick-actions{grid-template-columns:1fr;gap:8px;display:grid}.quick-actions button,.action-button{color:#f7f5ef;background:#121212;border:1px solid #343434;border-radius:8px;justify-content:center;min-height:42px;font-size:13px;font-weight:760;text-decoration:none}.quick-actions button:hover,.action-button:hover,.icon-button:hover{background:#242424}.control-group{border-bottom:1px solid #2a2a2a;gap:12px;padding-bottom:18px;display:grid}.group-heading span,.group-heading strong,.control-group label>span,.mapper-field>span{color:#a8a29a;letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:820;line-height:1}.group-heading strong{color:#f7f5ef;font-size:13px}.icon-button{color:#f7f5ef;background:#121212;border:1px solid #343434;border-radius:8px;justify-content:center;width:34px;height:34px}.control-group label{gap:7px;display:grid}.mapper-field{gap:8px;display:grid}.mapper-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.mapper-grid button{color:#f7f5ef;background:#121212;border:1px solid #343434;border-radius:8px;min-height:34px;padding:0 8px;font-size:12px;font-weight:760}.mapper-grid button.active,.mapper-grid button:hover{color:#050505;background:#f7f5ef;border-color:#f7f5ef}.range-field{padding:10px 0 0}.range-field input{appearance:none;background:linear-gradient(90deg, #f7f5ef var(--slider-progress), #343434 var(--slider-progress)) center / 100% 4px no-repeat;border:0;width:100%;height:28px}.range-field input::-webkit-slider-thumb{appearance:none;background:#050505;border:2px solid #f7f5ef;border-radius:999px;width:22px;height:22px}.range-field input::-moz-range-thumb{background:#050505;border:2px solid #f7f5ef;border-radius:999px;width:20px;height:20px}.control-group select,.control-group input[type=text]{color:#f7f5ef;background:#121212;border:1px solid #343434;border-radius:8px;width:100%;min-height:40px;padding:0 10px}.control-group input[type=text]::placeholder{color:#6f6a62}.tick-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.tick-row button{color:#c8c2b8;background:0 0;border-radius:6px;min-width:0;min-height:28px;font-size:11px;font-weight:760}.tick-row button.active,.tick-row button:hover{color:#050505;background:#f7f5ef}.status-line{color:#c8c2b8;border-top-color:#2a2a2a;margin:0;line-height:1.35}.og-preview{aspect-ratio:1200/630;background-color:#121212;background-position:50%;background-size:cover;border:1px solid #343434;border-radius:8px}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.action-button.wide{grid-column:1/-1}.hidden-download{display:none}@media (width<=720px){.app{grid-template-rows:minmax(260px,48vh) minmax(0,1fr)}.composition-stage{height:auto}.stage-header,.stage-footer{flex-direction:column;align-items:flex-start}.composition-card{grid-template-rows:repeat(3,minmax(0,1fr));gap:0;height:88%;min-height:0;padding:10px 0}.sidebar{border-top:1px solid #000;border-left:0;height:auto;padding:18px}.tick-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
