:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e9e7e1;background:#151618;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color-scheme:dark;--surface: #1b1c1f;--line: #303135;--muted: #96979c;--accent: #e8e4d9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}button{color:inherit;background:transparent;border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:#303136;border-color:#525358}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a7c9fa;outline-offset:4px}button.primary{background:var(--accent);color:#242522;border-color:var(--accent);font-size:12px;font-weight:650;padding:12px 18px}button.primary:hover:not(:disabled){background:#fffbed;border-color:#fffbed}.app{max-width:1800px;margin:0 auto}.topbar{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{display:flex;align-items:center;gap:11px;font-size:24px;letter-spacing:-1px;font-weight:550}.brand-mark{font-size:38px;color:#e2dac5;line-height:1}.brand-divider{height:19px;width:1px;background:#3b3c40;margin:0 7px 0 15px}.brand-caption{font-size:9px;letter-spacing:1.8px;color:var(--muted);font-weight:500}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;padding:32px 40px 24px}.studio{min-width:0}.stage-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--muted)}h1{font-size:23px;font-weight:500;letter-spacing:-.5px;margin:10px 0 0}h1 span{font-size:10px;letter-spacing:0;color:#898b91;font-weight:400;margin-left:12px}.live-label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px}.live-label i,.app-footer i{width:5px;height:5px;border-radius:50%;background:#96af91;display:inline-block}.stage{min-height:565px;height:calc(100vh - 320px);max-height:770px;background:#1b1c1e;border:1px solid #2a2b2e;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:26px;position:relative;overflow:hidden}.preview-frame{height:100%;aspect-ratio:9/16;max-width:100%;filter:drop-shadow(0 18px 24px #0007)}.artwork{position:relative;width:100%;height:100%;overflow:hidden;border-radius:5px;isolation:isolate;background:#020306}.artwork canvas{width:100%;height:100%;display:block}.stage-footer{display:flex;justify-content:space-between;padding-top:14px;font-size:10px;color:var(--muted)}.controls{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;height:fit-content}.panel-title{display:flex;align-items:center;justify-content:space-between}.panel-title svg{color:#b5b2a8}h2{font-size:15px;letter-spacing:-.2px;font-weight:550;margin:0}.muted{color:var(--muted);font-size:11px;line-height:1.6}.control-group{border-top:1px solid var(--line);margin-top:23px;padding-top:22px}h3{font-size:11px;font-weight:550;margin:0 0 16px}.palette-preview{display:flex;height:45px;overflow:hidden;border-radius:6px}.palette-preview span{flex:1}.export-card{margin-top:32px;background:#232427;padding:18px;border:1px solid #333438;border-radius:8px}.export-card>span{font-size:9px;letter-spacing:1.3px;color:var(--muted)}.export-card strong{display:block;font-weight:450;font-size:25px;letter-spacing:-.8px;margin-top:10px}.export-card p{font-size:9px;color:var(--muted);margin:9px 0 0}.app-footer{display:flex;justify-content:space-between;padding:18px 40px;border-top:1px solid var(--line);font-size:10px;color:#85878e}.app-footer span:last-child{display:flex;align-items:center;gap:10px}.render-error{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;padding:30px;font-size:13px;line-height:1.6;background:#202124}.editing{touch-action:none;cursor:crosshair}.glow-handle{position:absolute;width:22px;height:22px;border:1px solid #ffffff70;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 1px #0002;display:grid;place-items:center}.glow-handle span{width:4px;height:4px;background:#fffc;border-radius:50%}@media(max-width:800px){.topbar{height:72px;padding:0 20px}.brand-caption,.brand-divider{display:none}.workspace{display:flex;flex-direction:column;padding:22px 18px;gap:24px}.stage{height:510px;min-height:0;padding:22px}.controls{width:100%}.app-footer{padding:20px;gap:15px;font-size:9px}.app-footer>span:first-child{display:none}.brand{font-size:23px}.live-label{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.header-actions{display:flex;align-items:center;gap:26px}.private-label{font-size:10px;color:#96979b;display:flex;align-items:center;gap:7px}.private-label i{width:4px;height:4px;background:#92988c;border-radius:50%}.brand>svg{color:#e2dac5;margin-right:1px}.workspace{align-items:start;grid-template-columns:minmax(0,1fr) 308px;gap:28px;padding-top:28px}.controls{padding:22px}.panel-intro{font-size:10px;color:var(--muted);margin:9px 0 0;line-height:1.6}.control-group{margin-top:20px;padding-top:18px}.control-group.first{margin-top:20px}.group-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:18px}.group-heading h3{margin:0}.tiny-label{font-size:8px;letter-spacing:1px;color:#85878e}.icon-button{width:28px;height:28px;border:0;color:#a4a5ab;padding:0;flex-shrink:0}.icon-button[aria-pressed=true]{color:#eee7d4;background:#36352e}.history-tools{display:flex;align-items:center;gap:4px}.history-tools>span{height:13px;width:1px;background:#36373b;margin:0 5px}.history-tools .icon-button{width:30px;height:30px}.family-tabs{display:flex;gap:2px;background:#141517;padding:3px;border:1px solid #2b2c2f;border-radius:7px}.family-tabs button{flex:1;padding:8px 0;border:0;border-radius:4px;font-size:10px;color:#94969d}.family-tabs button.selected{background:#343538;color:#efede7;box-shadow:0 1px 3px #0005}.palette-editors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.color-editor{min-width:0;text-align:center}.color-swatch{position:relative;display:block;height:33px;border-radius:5px;border:1px solid #ffffff18;overflow:hidden;cursor:pointer}.color-swatch:focus-within{outline:2px solid #a7c9fa;outline-offset:3px}.color-swatch input{opacity:0;width:100%;height:100%;cursor:pointer;border:0;position:absolute;top:0;right:0;bottom:0;left:0;padding:0}.hex-input{display:block;width:100%;font-size:9px;letter-spacing:-.2px;color:#b4b5ba;text-align:center;background:transparent;border:1px solid transparent;border-radius:3px;padding:7px 0 3px;outline-offset:0!important}.hex-input[aria-invalid=true]{color:#f5ac9e;border-color:#ac6759}.color-editor>span{font-size:8px;color:#7f8188}.range-control{display:block;margin-bottom:13px}.range-control>span{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#acaeb4;margin-bottom:5px}.range-control output{font-size:9px;font-variant-numeric:tabular-nums;color:#c4c4c6}.range-control input{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:19px;padding:0;display:block;border:0;background:transparent;cursor:ew-resize;margin:0;touch-action:none}.range-control input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#b7b3a7 0 var(--fill),#3d3f43 var(--fill) 100%)}.range-control input::-moz-range-track{height:3px;border-radius:3px;background:#3d3f43}.range-control input::-moz-range-progress{height:3px;background:#b7b3a7}.range-control input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#e4e1d8;border:1px solid #e4e1d8;box-shadow:0 1px 4px #0005;margin-top:-3.5px}.range-control input::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#e4e1d8;border:1px solid #e4e1d8}.advanced{margin-top:1px}.advanced summary{cursor:pointer;font-size:9px;color:#96989f;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:7px 0}.advanced summary::-webkit-details-marker{display:none}.advanced[open] summary svg{transform:rotate(180deg)}.advanced>div{padding-top:16px}.control-note{font-size:9px;line-height:1.6;color:#8b8d95;margin:8px 0}.seed-control{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a8aab0;margin-top:15px}.seed-control input{font-size:10px;max-width:135px;background:#151618;border:1px solid var(--line);border-radius:4px;padding:7px 9px;color:#b8b9bd}.random-button{width:100%;margin-top:18px;padding:11px 10px;font-size:10px;border-color:#414247;color:#d1d0cc;justify-content:flex-start;background:#252629}.random-button>span{margin-left:auto;color:#979992}.random-button>svg{margin-right:3px}.lock-note{font-size:9px;color:#b6ae98;margin:8px 0 0;text-align:center}.select-label{position:relative;display:block}.select-label>svg{position:absolute;pointer-events:none;right:12px;top:13px;color:#92949b}.select-label select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:1px solid #3b3d41;background:#222326;color:#dad9d5;font-size:11px;border-radius:6px;padding:11px 32px 11px 11px;cursor:pointer}.export-dimensions{display:flex;align-items:center;gap:8px;margin:14px 0;color:#a6a7ae}.export-dimensions>span:first-of-type{font-variant-numeric:tabular-nums;font-size:14px;color:#e0dfda;letter-spacing:-.15px}.export-dimensions i{font-style:normal;font-size:11px;color:#73757d;margin:0 2px}.export-dimensions small{font-size:9px;color:#868890;margin-left:5px}.export-dimensions>span:last-child{margin-left:auto;font-size:9px;color:#85878e}.full-width{width:100%}button.primary.full-width{font-size:11px;padding:12px 8px}.local-note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:8px;color:#85878e;margin:11px 0 0}.local-note>span{width:4px;height:4px;background:#879b7f;border-radius:50%}.recipe-actions{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.recipe-actions button{flex:1;border:0;font-size:9px;gap:5px;color:#979aa3;padding:5px 0;white-space:nowrap}.save-again{font-size:10px;display:block;color:#d9d3c3;text-align:center;margin-top:12px}.mobile-panel-toggle{display:none}.stage{--art-height: clamp(430px, calc(100vh - 394px) ,650px);height:calc(var(--art-height) + 96px);min-height:0;max-height:none;padding:48px 36px;background:radial-gradient(ellipse at 50% 90%,#232529,#1b1c1e 65%)}.preview-frame{max-height:100%;max-width:100%;flex-shrink:0;border:1px solid #ffffff12;border-radius:6px;box-shadow:0 5px 7px #0003;filter:drop-shadow(0 18px 24px #0008)}.stage-tag{position:absolute;top:21px;left:23px;display:flex;gap:10px;align-items:center;font-size:8px;letter-spacing:1.1px;color:#96989f}.stage-tag>span{font-size:8px;letter-spacing:0;color:#73757c;border-left:1px solid #3a3b3e;padding-left:10px}.move-toggle{position:absolute;bottom:14px;left:50%;transform:translate(-50%);font-size:9px;padding:7px 10px;background:#25262a;border:1px solid #383a3e;color:#92969e;white-space:nowrap}.move-toggle.is-active{background:#dedacf;color:#222;border-color:#dedacf}.stage-corner{position:absolute;bottom:20px;right:22px;color:#53565d;font-size:14px;font-weight:200}.stage-footer{font-size:10px;gap:12px;line-height:1.5}.dimensions-label{font-size:9px;white-space:nowrap;font-variant-numeric:tabular-nums}.dimensions-label>span{color:#666a72}.presets{margin-top:29px}.presets-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.presets-heading h2{font-size:12px;white-space:nowrap}.presets-heading h2>span{display:block;margin-top:6px;font-size:9px;font-weight:400;letter-spacing:0;color:#7f828b}.family-filters{display:flex;gap:3px}.family-filters button{font-size:9px;border:0;color:#858891;padding:6px 9px;border-radius:4px}.family-filters button.selected{color:#d8d6cf;background:#303135}.preset-strip{display:flex;gap:13px;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 3px 13px;margin:0 -3px;scrollbar-color:#42454b transparent;scrollbar-width:thin;scroll-snap-type:x proximity}.preset{border:0;display:flex;flex-direction:column;align-items:flex-start;flex:0 0 108px;padding:0;gap:0;scroll-snap-align:start;border-radius:7px}.preset:hover:not(:disabled){background:transparent}.preset-image{width:100%;height:74px;border-radius:6px;overflow:hidden;position:relative;display:block;outline:1px solid #ffffff0d;outline-offset:0;transition:outline-color .2s}.preset-image>img{width:100%;height:100%;object-fit:cover;object-position:center 69%;display:block}.preset-image>span:not(.selected-dot){display:block;width:100%;height:100%}.preset.selected .preset-image{outline:1px solid #cac4b2;outline-offset:3px}.preset:hover .preset-image{outline-color:#8a8b8e}.preset-name{font-size:10px;color:#c6c6c5;margin-top:12px;letter-spacing:.1px}.preset-family{font-size:8px;color:#7e818a;margin-top:4px}.selected-dot{position:absolute;right:6px;bottom:6px;width:15px;height:15px;background:#eee9db;color:#31332f;border-radius:50%;display:grid;place-content:center}.app-footer{margin-top:0}.custom-dimensions{margin:15px 0}.custom-dimensions>div{display:flex;align-items:end;gap:8px}.custom-dimensions label{font-size:9px;color:#a5a8b0;min-width:0;flex:1}.custom-dimensions input{display:block;width:100%;border:1px solid #424449;background:#151619;color:#d6d7da;border-radius:5px;padding:9px 8px;font-size:11px;margin-top:6px}.custom-dimensions>div>span{font-size:10px;color:#848791;padding-bottom:11px}.custom-dimensions>button{font-size:10px;padding:8px;width:100%;margin-top:10px}.inline-error{font-size:10px;line-height:1.5;color:#f0ae9a}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%);z-index:30;display:flex;gap:12px;align-items:center;max-width:min(560px,calc(100vw - 32px));padding:12px 12px 12px 18px;border:1px solid #535650;background:#2c302a;box-shadow:0 8px 30px #0005;border-radius:10px;color:#dee4d9;font-size:11px}.toast p{margin:0;line-height:1.6}.toast>span{flex-shrink:0}.toast.error{background:#352926;color:#f2c5b5;border-color:#76594b}.export-status{position:fixed;z-index:35;bottom:24px;left:50%;transform:translate(-50%);width:min(400px,calc(100vw - 32px));padding:18px 18px 14px;background:#292b2e;border:1px solid #4a4c50;border-radius:10px;box-shadow:0 8px 40px #0008}.export-status>div{display:flex;align-items:center;gap:10px;font-size:11px}.export-status button{margin-left:auto;border:0;font-size:10px;padding:5px;color:#c6c7ca}.export-status progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;width:100%;margin-top:16px;display:block;border:0;background:#46484b}.export-status progress::-webkit-progress-bar{background:#46484b;border-radius:2px}.export-status progress::-webkit-progress-value{background:#dbd6c9;border-radius:2px}.export-status progress::-moz-progress-bar{background:#dbd6c9}.spinner{width:13px;height:13px;border:1px solid #73756e;border-top-color:#dedbcd;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 330px;gap:36px;padding-left:52px;padding-right:52px}.controls{padding:25px}.preset{flex-basis:128px}.preset-image{height:82px}.topbar{padding:0 52px}.stage{--art-height: clamp(460px, calc(100vh - 394px) ,730px)}}@media(max-width:1100px)and (min-width:801px){.workspace{padding:24px;gap:22px;grid-template-columns:minmax(0,1fr) 285px}.controls{padding:18px}.topbar{padding:0 24px}.private-label{display:none}.presets-heading{align-items:flex-start;flex-direction:column}.preset{flex-basis:96px}.family-filters button{padding-left:0;padding-right:14px}.stage{padding-left:20px;padding-right:20px}.stage-footer{font-size:9px}.stage-heading h1 span{display:block;margin:5px 0 0}.stage-heading{align-items:end}.brand-caption{font-size:8px}}@media(max-width:800px){.workspace{padding:22px 18px 18px;gap:20px;display:flex;flex-direction:column}.studio{width:100%}.topbar{height:72px;padding:0 19px}.brand{gap:8px;font-size:23px}.brand>svg{width:27px}.brand-caption,.brand-divider,.private-label{display:none}.header-actions{gap:0}button.primary.download{font-size:10px;padding:10px 12px;gap:6px}.stage-heading{margin-bottom:17px}h1{font-size:22px;margin-top:8px}h1 span{font-size:9px;margin-left:8px}.eyebrow{font-size:8px;letter-spacing:1.3px}.stage{--art-height: clamp(350px, calc(70svh - 130px) ,550px);height:calc(var(--art-height) + 86px);padding:42px 18px;border-radius:10px}.stage-tag{top:17px;left:16px;font-size:7px;gap:8px}.stage-tag>span{font-size:7px}.stage-corner{right:16px;bottom:14px}.move-toggle{bottom:10px}.stage-footer{font-size:9px;padding-top:12px;gap:10px}.stage-footer>span:first-child{max-width:65%}.dimensions-label{font-size:8px}.presets{margin-top:23px}.presets-heading{gap:15px;flex-direction:column;align-items:stretch}.presets-heading h2{display:flex;justify-content:space-between;align-items:center;font-size:12px}.presets-heading h2>span{display:inline;margin:0;font-size:8px}.family-filters{gap:8px}.family-filters button{font-size:10px;padding:8px 12px;min-height:33px}.preset-strip{gap:14px;padding-bottom:12px}.preset{flex-basis:105px}.preset-image{height:73px}.controls{padding:0;border-radius:10px;width:100%;scroll-margin-top:15px}.mobile-panel-toggle{display:flex;width:100%;border:0;padding:19px 18px;justify-content:space-between;font-size:13px}.mobile-panel-toggle>span{display:flex;align-items:center;gap:9px}.mobile-panel-toggle>span>span{font-size:9px;color:#8a8d95;font-weight:400;margin-left:4px}.panel-open .mobile-panel-toggle>svg{transform:rotate(180deg)}.control-content{display:none;padding:0 23px 23px}.panel-open .control-content{display:block}.control-content .panel-title,.control-content .panel-intro{display:none}.control-group.first{margin-top:0;padding-top:18px}.group-heading{margin-bottom:16px}.group-heading h3{font-size:12px}.family-tabs button{font-size:11px;padding:12px 0;min-height:44px}.icon-button{width:32px;height:32px}.color-swatch{height:46px}.hex-input{font-size:11px;padding:11px 0 7px}.color-editor>span{font-size:9px}.palette-editors{gap:12px}.range-control{margin-bottom:14px}.range-control>span{font-size:12px;margin-bottom:2px}.range-control output{font-size:11px}.range-control input{height:32px}.range-control input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-6.5px}.range-control input::-moz-range-thumb{width:15px;height:15px}.advanced summary{font-size:11px;padding:12px 0}.control-note{font-size:10px}.random-button{padding:15px 14px;font-size:12px}.select-label select{padding:14px 12px;font-size:12px}.select-label>svg{top:17px}.full-width.primary{min-height:46px}.recipe-actions button{min-height:44px;font-size:11px}.export-dimensions{margin:18px 0}.export-dimensions>span:first-of-type{font-size:17px}.export-dimensions>span:last-child{font-size:10px}.local-note{font-size:9px;margin-top:14px}.app-footer{justify-content:center;padding:19px 18px 24px}.toast{bottom:16px;font-size:11px}.history-tools{gap:0}.history-tools>span{margin:0 2px}.history-tools .icon-button{width:28px}.custom-dimensions input{padding:12px;font-size:13px}.custom-dimensions label{font-size:11px}.custom-dimensions>button{padding:12px;font-size:11px}}@media(max-width:380px){.topbar{padding:0 14px}.brand{font-size:21px}.brand svg{width:25px}.workspace{padding-left:12px;padding-right:12px}.family-filters{gap:3px}.family-filters button{padding:8px 10px}.mobile-panel-toggle>span>span{display:none}h1 span{font-size:8px;margin-left:6px}.history-tools .icon-button{width:26px}.eyebrow{font-size:7px}}@media(max-width:800px){.palette-editors{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hex-input,.seed-control input,.custom-dimensions input,.select-label select{font-size:16px}.recipe-actions button{min-height:44px}}.home-link{color:#96979c;text-decoration:none;font-size:21px;margin-right:14px;padding:8px 0}.home-link:hover{color:#e9e7e1}.stage-heading h1{margin:0;font-size:18px}.stage-footer{justify-content:flex-end}.controls .control-group.first{border-top:0;margin-top:0;padding-top:0}.random-button{justify-content:center}.presets-heading{align-items:center}@media(max-width:800px){.controls .control-group.first{padding-top:12px}.home-link{margin-right:6px;padding:8px 4px}.stage-heading h1{font-size:18px}.presets-heading{align-items:stretch}}