:root{--primary: #137fec;--bg-light: #f6f7f8;--bg-dark: #101922;--panel-dark: #16202a;--border-dark: #233648;--text-white: #ffffff;--text-slate-300: #cbd5e1;--text-slate-400: #94a3b8;--text-slate-500: #64748b;--text-slate-900: #0f172a;--font-display: "Space Grotesk", sans-serif}@media(min-width:769px)and (max-width:1023px){.right-panel{position:fixed;top:4rem;right:0;bottom:0;left:auto;height:calc(100vh - 4rem);width:20rem;border-radius:0;box-shadow:-30px 0 60px #0006;transform:translate(0);transition:transform .25s ease}.right-panel.is-collapsed{transform:translate(100%)}.app-container.tools-collapsed .right-panel.is-collapsed .panel-content{display:flex}}*{box-sizing:border-box}body{margin:0;font-family:var(--font-display);background-color:var(--bg-dark);color:var(--text-white);height:100vh;overflow:hidden;display:flex;flex-direction:column}#root{width:100%;height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#324d67;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a6b8a}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}@keyframes pulse-border{0%,to{border-color:var(--primary);box-shadow:0 0 #137fec66}50%{border-color:#137feccc;box-shadow:0 0 0 4px #137fec00}}.app-container{display:flex;flex-direction:column;height:100%;min-width:0}.main-workspace{flex:1;display:flex;overflow:hidden;min-width:0}.header{height:4rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-dark);background-color:var(--bg-dark);padding:0 1.5rem;z-index:20}.header-left,.header-right{display:flex;align-items:center;gap:1rem}.logo-box{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background-color:#137fec33;border-radius:.5rem;color:var(--primary)}.app-title{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}.divider{height:1.5rem;width:1px;background-color:var(--border-dark);margin:0 .5rem}.nav-links{display:flex;gap:.25rem}.nav-btn{padding:.375rem .75rem;font-size:.875rem;font-weight:500;border-radius:.25rem;color:var(--text-slate-400);background:transparent;border:none;cursor:pointer;transition:color .2s,background-color .2s}.nav-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.icon-btn{padding:.5rem;color:var(--text-slate-400);background:transparent;border:none;border-radius:.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.icon-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.primary-btn{display:flex;align-items:center;gap:.5rem;background-color:var(--primary);color:#fff;padding:.5rem 1rem;border-radius:.5rem;border:none;font-size:.875rem;font-weight:700;cursor:pointer;transition:background-color .2s;box-shadow:0 0 15px #137fec4d}.primary-btn:hover{background-color:#2563eb}.sidebar-left{width:4rem;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;border-right:1px solid var(--border-dark);background-color:var(--bg-dark);z-index:10}.tool-btn{padding:.75rem;border-radius:.75rem;background:transparent;color:var(--text-slate-400);border:none;cursor:pointer;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s}.tool-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.tool-btn.active{background-color:#137fec33;color:var(--primary)}.tooltip{position:absolute;left:3.5rem;background-color:#1e293b;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;border:1px solid var(--border-dark);transition:opacity .2s;z-index:50}.tool-btn:hover .tooltip{opacity:1}.canvas-area{flex:1 1 0;position:relative;background-color:#0b1218;display:flex;flex-direction:column;min-width:0}.checkerboard-bg{position:absolute;inset:0;opacity:.2;background-image:repeating-linear-gradient(45deg,#1a2632 25%,transparent 25%,transparent 75%,#1a2632 75%,#1a2632),repeating-linear-gradient(45deg,#1a2632 25%,transparent 25%,transparent 75%,#1a2632 75%,#1a2632);background-position:0 0,10px 10px;background-size:20px 20px;pointer-events:none}.viewport{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden;min-width:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;border:2px dashed var(--border-dark);border-radius:.75rem;background-color:#10192280;backdrop-filter:blur(4px);max-width:32rem;width:100%;text-align:center;transition:border-color .2s;cursor:pointer}.empty-state:hover{border-color:#137fec80}.empty-icon{width:4rem;height:4rem;border-radius:50%;background-color:var(--border-dark);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:transform .3s}.empty-state:hover .empty-icon{transform:scale(1.1)}.upload-text{color:var(--text-slate-400);margin-bottom:2rem;max-width:20rem}.floating-bar{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.25rem;background-color:#101922e6;backdrop-filter:blur(4px);border:1px solid var(--border-dark);padding:.375rem;border-radius:.75rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;z-index:20}.right-panel{width:20rem;min-width:20rem;background-color:var(--panel-dark);border-left:1px solid var(--border-dark);display:flex;flex-direction:column;z-index:10;flex-shrink:0}.panel-header{height:3rem;border-bottom:1px solid var(--border-dark);display:flex;align-items:center;padding:0 1rem;justify-content:space-between}.panel-title{font-size:.875rem;font-weight:700;letter-spacing:.1em;color:var(--text-slate-400);text-transform:uppercase}.panel-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.right-panel.is-collapsed .panel-content{display:none}details{background-color:var(--bg-dark);border:1px solid var(--border-dark);border-radius:.75rem;overflow:hidden}details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:.75rem;cursor:pointer;user-select:none;background-color:var(--bg-dark);transition:background-color .2s}details>summary:hover{background-color:#ffffff0d}details>summary::-webkit-details-marker{display:none}.accordion-content{padding:1rem;border-top:1px solid rgba(35,54,72,.5);display:flex;flex-direction:column;gap:1.5rem}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:.5rem;padding:.75rem}.filter-item{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.5rem;border-radius:.5rem;background:transparent;border:none;cursor:pointer;transition:background-color .2s}.filter-item:hover{background-color:#ffffff0d}.filter-preview{width:100%;aspect-ratio:1/1;border-radius:.375rem;box-shadow:0 1px 2px #0000000d;border:1px solid rgba(255,255,255,.1)}.filter-item:hover .filter-preview{border-color:#137fec80}.ad-section{padding:1rem;border-top:1px solid var(--border-dark);background-color:#0f151a}.ad-box{width:100%;aspect-ratio:6/5;background-color:#1e293b80;border-radius:.5rem;border:2px dashed #334155;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.ad-section--mobile{display:none}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:#1e293b;height:.25rem;border-radius:.5rem;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:1rem;width:1rem;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab;margin-top:-.375rem;box-shadow:0 1px 3px #0000004d}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.25rem;background:#1e293b;border-radius:.5rem;cursor:pointer}input[type=range]::-moz-range-thumb{height:1rem;width:1rem;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab;box-shadow:0 1px 3px #0000004d}input[type=range]::-moz-range-track{width:100%;height:.25rem;background:#1e293b;border-radius:.5rem;cursor:pointer}@media(max-width:768px),(max-device-width:480px),(hover:none)and (pointer:coarse){.main-workspace{flex-direction:column}.sidebar-left{position:fixed;left:0;right:0;bottom:0;width:100%;height:4rem;flex-direction:row;justify-content:space-around;border-right:none;border-top:1px solid var(--border-dark);padding:.5rem;overflow-x:auto;z-index:40}.canvas-area{flex:1}.app-container.tools-open .canvas-area{padding-bottom:calc(4rem + 55vh)}.app-container.tools-collapsed .canvas-area{padding-bottom:7.25rem}.right-panel{position:fixed;left:0;right:0;bottom:4rem;width:100%;max-height:55vh;border-left:none;border-top:1px solid var(--border-dark);z-index:30;border-radius:1rem 1rem 0 0;transition:transform .25s ease,max-height .25s ease}.right-panel.is-collapsed{max-height:3.25rem;overflow:hidden}.panel-header{height:3.25rem}.panel-content{padding:.75rem}.tool-btn{width:3rem;height:3rem;flex-shrink:0}.tooltip{display:none}.viewport{padding:.75rem}.ad-section--desktop{display:none}.ad-section--mobile{display:block}}input[type=range][data-testid=floating-zoom-slider]{-webkit-appearance:none;appearance:none;width:120px;height:20px;background:#ffffff1a;border-radius:10px;outline:none;cursor:pointer}input[type=range][data-testid=floating-zoom-slider]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer;box-shadow:0 2px 4px #0000004d}input[type=range][data-testid=floating-zoom-slider]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:pointer;box-shadow:0 2px 4px #0000004d}input[type=range][data-testid=floating-zoom-slider]::-webkit-slider-runnable-track{width:100%;height:4px;background:#ffffff1a;border-radius:2px;cursor:pointer}input[type=range][data-testid=floating-zoom-slider]::-moz-range-track{width:100%;height:4px;background:#ffffff1a;border-radius:2px;cursor:pointer}