:root{--font-serif:"Playfair Display", Georgia, serif;--font-sans:"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-primary:#0a0a0a;--bg-secondary:#121212;--bg-tertiary:#1c1c1c;--ink-primary:#f5f5f4;--ink-secondary:#a8a29e;--ink-tertiary:#575756;--border-primary:#262626;--border-secondary:#404040;--border-focus:#fff;--shadow-color:#0009;--shadow-active:#ffffff0d;--transition-speed:.15s;--transition-ease:cubic-bezier(.16, 1, .3, 1);--overlay-bg:#0009;--overlay-bg-heavy:#000000d9;--overlay-text:#fff;--shadow-lg:0 20px 40px #0000004d;--z-base:1;--z-sticky:10;--z-overlay:100;--z-modal:1000;--z-toast:2000;--header-height:56px;--sidebar-width:320px;--dock-height:120px}:root.light{--bg-primary:#fbfbfa;--bg-secondary:#fff;--bg-tertiary:#f4f4f3;--ink-primary:#121212;--ink-secondary:#575756;--ink-tertiary:#a8a29e;--border-primary:#e5e5e4;--border-secondary:#ccc;--border-focus:#000;--shadow-color:#0000000d;--shadow-active:#00000026;--overlay-bg:#00000080;--overlay-bg-heavy:#000c;--shadow-lg:0 20px 40px #00000026}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--ink-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);line-height:1.5;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-secondary)}h1,h2,h3,h4{font-family:var(--font-serif);color:var(--ink-primary);letter-spacing:-.01em;font-weight:500}p,span,label,input,button,textarea,select{font-family:var(--font-sans);font-size:.875rem}.ds-btn{border:1px solid var(--border-primary);color:var(--ink-primary);cursor:pointer;transition:all var(--transition-speed) var(--transition-ease);background:0 0;outline:none;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:.8125rem;font-weight:500;display:inline-flex}.ds-btn:hover,.ds-btn-active{border-color:var(--border-focus);background-color:var(--ink-primary);color:var(--bg-primary)}.ds-btn-icon-only{width:36px;height:36px;padding:0}.ds-input-group{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.ds-label{text-transform:uppercase;letter-spacing:.05em;color:var(--ink-secondary);font-size:.75rem;font-weight:500}.ds-input{background-color:var(--bg-secondary);border:1px solid var(--border-primary);width:100%;color:var(--ink-primary);transition:border-color var(--transition-speed) var(--transition-ease);outline:none;padding:8px 12px;font-size:.8125rem}.ds-input:focus{border-color:var(--border-focus)}.ds-select{background-color:var(--bg-secondary);border:1px solid var(--border-primary);width:100%;color:var(--ink-primary);cursor:pointer;appearance:none;transition:border-color var(--transition-speed) var(--transition-ease);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;outline:none;padding:8px 32px 8px 12px;font-size:.8125rem}.ds-select:focus{border-color:var(--border-focus)}.ds-panel{background-color:var(--bg-secondary);border:1px solid var(--border-primary);padding:24px}.app-shell{grid-template-rows:var(--header-height) 1fr;background-color:var(--bg-primary);width:100vw;height:100vh;display:grid}.app-header{border-bottom:1px solid var(--border-primary);background-color:var(--bg-secondary);justify-content:space-between;align-items:center;padding:0 24px;display:flex}.app-logo{align-items:center;gap:12px;display:flex}.app-logo h1{letter-spacing:-.02em;font-size:1.125rem}.app-nav{gap:4px;display:flex}.app-actions{align-items:center;gap:12px;display:flex}.app-main{grid-template-columns:var(--sidebar-width) 1fr var(--sidebar-width);height:calc(100vh - var(--header-height));transition:grid-template-columns var(--transition-speed) var(--transition-ease);display:grid;overflow:hidden}.app-main.left-collapsed{grid-template-columns:0px 1fr var(--sidebar-width)}.app-main.right-collapsed{grid-template-columns:var(--sidebar-width) 1fr 0px}.app-main.both-collapsed{grid-template-columns:0 1fr 0}.sidebar{border-inline:1px solid var(--border-primary);background-color:var(--bg-secondary);height:100%;transition:opacity var(--transition-speed) var(--transition-ease);flex-direction:column;min-width:0;display:flex;overflow:hidden auto}.sidebar.collapsed{opacity:0;border-inline-width:0;overflow:hidden}.sidebar-title{text-transform:uppercase;letter-spacing:.05em;color:var(--ink-secondary);border-bottom:1px solid var(--border-primary);padding:16px 20px;font-size:.875rem;font-weight:600}.sidebar-content{flex:1;padding:20px}.viewport-container{grid-template-rows:1fr var(--dock-height);height:100%;display:grid;position:relative}.viewport-canvas-wrapper{justify-content:center;align-items:center;padding:40px;display:flex;position:relative;overflow:auto}.viewport-zoom-bar{background-color:var(--bg-secondary);border:1px solid var(--border-primary);box-shadow:0 4px 12px var(--shadow-color);z-index:var(--z-sticky);align-items:center;gap:12px;padding:6px 12px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.viewport-zoom-value{text-align:center;min-width:40px;font-size:.75rem;font-weight:500}.asset-dock{border-top:1px solid var(--border-primary);background-color:var(--bg-secondary);flex-direction:column;height:100%;display:flex;overflow:hidden}.asset-dock-header{border-bottom:1px solid var(--border-primary);justify-content:space-between;align-items:center;padding:8px 20px;display:flex}.asset-dock-header span{text-transform:uppercase;letter-spacing:.05em;color:var(--ink-secondary);font-size:.6875rem;font-weight:600}.asset-dock-scroll{flex:1;align-items:center;gap:12px;padding:12px 20px;display:flex;overflow-x:auto}.asset-item-card{border:1px solid var(--border-primary);background-color:var(--bg-primary);cursor:pointer;width:60px;height:60px;transition:border-color var(--transition-speed) var(--transition-ease);flex-shrink:0;position:relative;overflow:hidden}.asset-item-card:hover{border-color:var(--border-focus)}.asset-item-card img{object-fit:cover;width:100%;height:100%}.asset-item-add{background-color:var(--bg-tertiary);border-style:dashed;justify-content:center;align-items:center;display:flex}.custom-preset-card:hover{border-color:var(--border-focus)!important;background-color:var(--bg-tertiary)!important}.custom-preset-card button:hover{color:var(--ink-primary)!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.ds-btn:focus-visible,.ds-input:focus-visible,.ds-select:focus-visible,button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}@media (width<=1024px) and (width>=769px){:root{--sidebar-width:260px;--dock-height:100px}.app-header{padding:0 16px}.app-nav .ds-btn{padding:6px 12px;font-size:.75rem}.sidebar-content{padding:16px}.viewport-canvas-wrapper{padding:24px}}@media (width<=768px){:root{--sidebar-width:280px;--dock-height:100px;--header-height:48px}.app-header{padding:0 12px}.app-logo h1{display:none}.app-nav{gap:2px}.app-nav .ds-btn{padding:6px 10px;font-size:.6875rem}.app-actions{gap:6px}.app-main{grid-template-columns:0 1fr 0}.sidebar{top:var(--header-height);width:var(--sidebar-width);z-index:100;box-shadow:8px 0 24px var(--shadow-color);transition:transform var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);position:fixed;bottom:0}.sidebar:first-of-type{left:0;transform:translate(0)}.sidebar:last-of-type{right:0;transform:translate(0)}.sidebar.collapsed{opacity:0;pointer-events:none}.sidebar.collapsed:first-of-type{transform:translate(-100%)}.sidebar.collapsed:last-of-type{transform:translate(100%)}.sidebar-content{padding:16px}.viewport-canvas-wrapper{padding:16px 16px 80px}.viewport-zoom-bar{gap:8px;padding:4px 8px;bottom:12px}.asset-dock-scroll{gap:8px;padding:8px 12px}.ds-btn-icon-only{min-width:44px;min-height:44px}.asset-item-card{width:52px;height:52px}}