.ms-shell{background:var(--neutral-warm-white);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.ms-shell-header{z-index:var(--z-shell);flex-shrink:0}.ms-shell-main{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.ms-shell-footer{z-index:var(--z-shell);flex-shrink:0}.ms-panel-hover-trigger{width:4px;height:100%;z-index:var(--z-panel);cursor:pointer;position:absolute;top:0;left:0}.ms-panel-hover-trigger--right{width:4px;height:100%;z-index:var(--z-panel);cursor:pointer;position:absolute;top:0;right:0}.ms-shell[data-loading=true]{pointer-events:none}.ms-shell[data-loading=true] .ms-shell-main{opacity:.7}
.ms-shell-toolbar{background:var(--neutral-warm-white);border-bottom:1px solid var(--neutral-medium-gray);height:64px;min-height:64px;max-height:64px;padding:0 var(--space-4);align-items:center;gap:var(--space-4);z-index:var(--z-shell);display:flex;position:relative}.ms-toolbar-left{align-items:center;gap:var(--space-3);display:flex}.ms-toolbar-center{justify-content:center;align-items:center;gap:var(--space-4);flex:1;display:flex}.ms-toolbar-right{align-items:center;gap:var(--space-3);display:flex}.ms-toolbar-project-name{font-family:var(--font-heading);color:var(--neutral-charcoal);margin:0;font-size:1.125rem;font-weight:600}.ms-toolbar-breadcrumb{color:var(--neutral-dark-gray);font-size:.875rem}.ms-toolbar-save-state{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:.875rem;font-weight:500;display:flex}.ms-toolbar-save-state--idle{background:var(--neutral-light-gray);color:var(--neutral-dark-gray)}.ms-toolbar-save-state--dirty{background:var(--accent-gold);color:var(--neutral-charcoal)}.ms-toolbar-save-state--saving,.ms-toolbar-save-state--autosaving,.ms-toolbar-save-state--saved{background:var(--primary-sage);color:#fff}.ms-toolbar-save-state--error{background:var(--primary-rose);color:#fff}.ms-toolbar-button{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);color:var(--neutral-dark-gray);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;font-size:.875rem;font-weight:500;display:flex}.ms-toolbar-button:hover{background:var(--neutral-light-gray);color:var(--neutral-charcoal)}.ms-toolbar-button:active{background:var(--neutral-medium-gray)}.ms-toolbar-button--primary{background:var(--brand-primary);color:#fff}.ms-toolbar-button--primary:hover{background:var(--primary-dark)}.ms-toolbar-button--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ms-toolbar-button-icon{flex-shrink:0;width:16px;height:16px}@media (max-width:768px){.ms-shell-toolbar{padding:0 var(--space-2);gap:var(--space-2)}.ms-toolbar-center,.ms-toolbar-right{gap:var(--space-2)}.ms-toolbar-project-name{font-size:1rem}.ms-toolbar-breadcrumb{display:none}}.app-logo{align-items:center;gap:var(--space-md,var(--space-4));color:var(--gray-800,var(--neutral-charcoal));cursor:pointer;font-size:1.25rem;font-weight:600;transition:all .3s;display:flex;position:relative}.app-logo:hover{transform:translateY(-1px)}.logo-icon{width:32px;height:32px;position:relative}.logo-square{border-radius:3px;width:14px;height:14px;position:absolute}.logo-square:first-child{background:linear-gradient(135deg,var(--primary),var(--primary-dark));top:0;left:0}.logo-square:nth-child(2){background:linear-gradient(135deg,var(--accent-pink),var(--accent-pink-dark,#e55555));opacity:.9;top:5px;left:14px}.logo-square:nth-child(3){background:linear-gradient(135deg,var(--accent-teal),var(--accent-teal-dark,#3ab7b0));opacity:.9;top:14px;left:0}.app-logo-text{transition:all .3s;display:inline-block}.app-logo-name{color:var(--gray-800,var(--neutral-charcoal))}.app-logo-studio{color:var(--primary);font-weight:700}.ms-brand-divider{color:var(--gray-400,var(--neutral-medium-gray));margin:0 8px;font-weight:300}.project-name-container{align-items:center;gap:8px;display:flex}.ms-title-display{cursor:pointer;border-radius:var(--radius-sm);min-width:100px;color:var(--gray-800,var(--neutral-charcoal));padding:4px 12px;font-weight:500;transition:background-color .2s;display:inline-block;position:relative}.ms-title-display:hover{background:#5850ec1a}.ms-title-editing{background:var(--white);border:2px solid var(--primary);border-radius:var(--radius-sm);color:var(--gray-800,var(--neutral-charcoal));outline:none;min-width:200px;padding:4px 8px;font-size:14px;font-weight:500;transition:all .2s}.ms-title-editing:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff33}.ms-title-editing--error{border-color:var(--danger);box-shadow:0 0 0 3px #ef444433}.ms-title-saving{opacity:.6;pointer-events:none}.ms-title-error{color:var(--danger);margin-left:8px;font-size:12px;font-weight:500}.ms-shell-toolbar__btn{cursor:pointer;width:40px;height:40px;color:var(--gray-600,var(--neutral-dark-gray));background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.ms-shell-toolbar__btn:hover{color:var(--primary);background:#5850ec1a;transform:translateY(-1px)}.ms-shell-toolbar__btn--active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #5850ec4d}.ms-shell-toolbar__btn--active:hover{background:var(--primary-dark);transform:translateY(-1px)}
.ms-shell-ribbon{background:var(--neutral-warm-white);border-bottom:1px solid var(--neutral-medium-gray);height:64px;min-height:64px;max-height:64px;padding:0 var(--space-4);align-items:center;gap:var(--space-6);z-index:var(--z-ribbon);display:flex;position:relative;overflow:auto visible}.ms-ribbon-group{align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md);flex-shrink:0;min-width:0;display:flex}.ms-ribbon-group-label{color:var(--neutral-dark-gray);text-transform:uppercase;letter-spacing:.025em;margin-bottom:var(--space-1);text-align:center;font-size:.75rem;font-weight:500}.ms-ribbon-group-content{align-items:center;gap:var(--space-1);display:flex}.ms-ribbon-button{align-items:center;gap:var(--space-1);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);color:var(--neutral-dark-gray);cursor:pointer;background:0 0;border:none;flex-direction:column;min-width:44px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.ms-ribbon-button:hover{background:var(--neutral-light-gray);color:var(--neutral-charcoal);transform:translateY(-1px)scale(1.02)}.ms-ribbon-button:active{background:var(--neutral-medium-gray);transform:translateY(0)scale(.98)}.ms-ribbon-button--primary{background:var(--brand-primary);color:#fff;box-shadow:0 2px 4px #06b6d433}.ms-ribbon-button--primary:hover{background:var(--brand-primary-dark);transform:translateY(-2px)scale(1.02);box-shadow:0 4px 8px #06b6d44d}.ms-ribbon-button--primary:active{transform:translateY(0)scale(.98);box-shadow:0 1px 2px #06b6d433}.ms-ribbon-button--active{background:var(--brand-primary);color:#fff;box-shadow:0 2px 4px #06b6d433}.ms-ribbon-button--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ms-ribbon-button-icon{flex-shrink:0;width:20px;height:20px}.ms-ribbon-button-label{text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:60px;font-size:.75rem;font-weight:500;line-height:1;overflow:hidden}.ms-ribbon-button--large{min-width:60px;padding:var(--space-3)var(--space-4)}.ms-ribbon-button--large .ms-ribbon-button-icon{width:24px;height:24px}.ms-ribbon-button--large .ms-ribbon-button-label{max-width:80px;font-size:.875rem}.ms-ribbon-button--horizontal{gap:var(--space-2);flex-direction:row;width:auto;min-width:0}.ms-ribbon-button--horizontal .ms-ribbon-button-label{white-space:nowrap}.ms-ribbon-separator{background:var(--neutral-medium-gray);width:1px;height:40px;margin:0 var(--space-2);flex-shrink:0}.ms-ribbon-dropdown{position:relative}.ms-ribbon-dropdown-arrow{color:currentColor;width:8px;height:8px;position:absolute;bottom:2px;right:2px}.ms-ribbon-split-button{border-radius:var(--radius-md);display:flex;overflow:hidden}.ms-ribbon-split-button-main{border-right:1px solid #0000001a;border-top-right-radius:0;border-bottom-right-radius:0}.ms-ribbon-split-button-dropdown{min-width:20px;padding:var(--space-2);border-top-left-radius:0;border-bottom-left-radius:0}@media (max-width:1024px){.ms-shell-ribbon{padding:0 var(--space-2);gap:var(--space-4)}.ms-ribbon-button{min-width:38px}.ms-ribbon-button-label{max-width:50px;font-size:.6875rem}}@media (max-width:768px){.ms-shell-ribbon{gap:var(--space-2)}.ms-ribbon-group{gap:var(--space-1)}.ms-ribbon-button{gap:var(--space-2);flex-direction:row;min-width:0}.ms-ribbon-button-label{display:none}}.ms-ribbon-button:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}.ribbon-menu{background:var(--neutral-warm-white);border-bottom:1px solid var(--neutral-medium-gray);z-index:var(--z-ribbon);position:relative}.ribbon-menu--collapsed .ribbon-content{display:none}.ribbon-tabs{background:var(--neutral-warm-white);border-bottom:1px solid var(--neutral-light-gray);justify-content:space-between;align-items:center;height:48px;display:flex}.ribbon-tabs-container{align-items:center;gap:0;display:flex}.ribbon-tab{height:48px;padding:0 var(--space-4);color:var(--neutral-dark-gray);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:3px solid #0000;justify-content:center;align-items:center;font-size:.875rem;font-weight:500;display:flex;position:relative}.ribbon-tab:hover{background:var(--neutral-light-gray);color:var(--neutral-charcoal)}.ribbon-tab--active{background:var(--neutral-warm-white);border-bottom-color:var(--brand-primary);color:var(--brand-primary);font-weight:600}.ribbon-tab--suggested{position:relative}.ribbon-tab--suggested:after{content:"";background:var(--primary-sage);opacity:.8;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;right:8px}.ribbon-tab-indicator{background:var(--primary-sage);opacity:.8;border-radius:50%;width:6px;height:6px;position:absolute;top:8px;right:8px}.ribbon-collapse-btn{width:32px;height:32px;margin-right:var(--space-3);border:1px solid var(--neutral-medium-gray);border-radius:var(--radius-md);color:var(--neutral-dark-gray);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.ribbon-collapse-btn:hover{background:var(--neutral-light-gray);border-color:var(--neutral-dark-gray)}.ribbon-collapse-icon{transition:transform var(--transition-fast)}.ribbon-collapse-icon--collapsed{transform:rotate(180deg)}.ribbon-content{background:var(--neutral-warm-white);min-height:64px;max-height:120px}.ribbon-tab-container{width:100%;height:100%}.ribbon-tab-loading{background:var(--neutral-warm-white);justify-content:center;align-items:center;height:64px;display:flex}.ribbon-tab-placeholder,.ribbon-tab-error{padding:var(--space-2)var(--space-4);align-items:center;height:64px;display:flex}.ribbon-tab:focus-visible{outline:2px solid var(--brand-primary);outline-offset:-2px;z-index:var(--z-content)}.ribbon-collapse-btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}@media (max-width:768px){.ribbon-tabs{height:40px}.ribbon-tab{height:40px;padding:0 var(--space-3);font-size:.8125rem}.ribbon-collapse-btn{width:28px;height:28px;margin-right:var(--space-2)}.ribbon-content{min-height:48px;max-height:96px}.ribbon-tab-loading,.ribbon-tab-placeholder,.ribbon-tab-error{height:48px}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ribbon-home-tab,.ribbon-insert-tab{background:var(--neutral-warm-white);width:100%;height:100%}.ribbon-group{align-items:flex-start;gap:var(--space-1);flex-direction:column;flex-shrink:0;min-width:0;display:flex}.ribbon-group-header h3{color:var(--neutral-dark-gray);text-transform:uppercase;letter-spacing:.025em;text-align:left;margin:0;font-size:.75rem;font-weight:500}.ribbon-group-content{gap:var(--space-1);flex-wrap:wrap;align-items:flex-start;display:flex}.ribbon-group-separator{background:var(--neutral-medium-gray);flex-shrink:0;width:1px;height:40px}.ribbon-button{border-radius:var(--radius-md);background:var(--neutral-warm-white);min-height:32px;color:var(--neutral-dark-gray);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid;justify-content:center;align-items:center;font-size:.875rem;font-weight:500;text-decoration:none;display:flex;position:relative}.ribbon-button:hover:not(:disabled){background:var(--neutral-light-gray);border-color:var(--brand-primary);color:var(--brand-primary)}.ribbon-button:active:not(:disabled){background:var(--neutral-medium-gray);transform:translateY(1px)}.ribbon-button:disabled{opacity:.5;cursor:not-allowed;background:var(--neutral-light-gray);border-color:var(--neutral-medium-gray);color:var(--neutral-medium-gray)}.ribbon-button:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;z-index:var(--z-content)}.ribbon-button--primary{background:var(--brand-primary);border-color:var(--primary-dark);color:#fff}.ribbon-button--primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}.ribbon-button svg{margin-right:var(--space-2);flex-shrink:0}.ribbon-button svg:only-child{margin-right:0}.ribbon-button .shortcut{opacity:.7;padding-left:var(--space-2);margin-left:auto;font-size:.75rem}@media (max-width:1024px){.ribbon-group{gap:var(--space-1)}.ribbon-group-content{gap:1px}.ribbon-button{min-height:28px;padding-left:var(--space-2);padding-right:var(--space-2);font-size:.8125rem}.ribbon-button svg{width:14px;height:14px}}@media (max-width:768px){.ribbon-button span:not(.shortcut){display:none}.ribbon-button svg{margin-right:0}.ribbon-button .shortcut{display:none}.ribbon-group-header h3{font-size:.6875rem}}.ribbon-button[data-testid=ribbon-btn-upload-image]{background:var(--brand-primary);border-color:var(--primary-dark);color:#fff;font-weight:600}.ribbon-button[data-testid=ribbon-btn-upload-image]:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 2px 4px #3b82f64d}.ribbon-button[data-testid=ribbon-btn-zoom-reset]{background:var(--neutral-light-gray);border-color:var(--neutral-dark-gray);min-width:60px;font-weight:600}.ribbon-button[aria-pressed=true]{background:var(--primary-sage);border-color:var(--primary-sage);color:#fff}.ribbon-tab-loading .animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
.ms-shell-status-bar{background:var(--neutral-light-gray);border-top:1px solid var(--neutral-medium-gray);height:40px;min-height:40px;max-height:40px;padding:0 var(--space-4);align-items:center;gap:var(--space-4);z-index:var(--z-shell);display:flex;position:relative}.ms-status-bar-left{align-items:center;gap:var(--space-3);display:flex}.ms-status-bar-center{justify-content:center;align-items:center;gap:var(--space-4);flex:1;display:flex}.ms-status-bar-right{align-items:center;gap:var(--space-3);display:flex}.ms-status-item{align-items:center;gap:var(--space-2);color:var(--neutral-dark-gray);white-space:nowrap;font-size:.8125rem;display:flex}.ms-status-item-label{font-weight:500}.ms-status-item-value{color:var(--neutral-charcoal);font-weight:400}.ms-status-item--interactive{padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.ms-status-item--interactive:hover{background:var(--neutral-medium-gray);color:var(--neutral-charcoal)}.ms-status-item--interactive:active{background:var(--neutral-dark-gray);color:var(--neutral-warm-white)}.ms-zoom-controls{align-items:center;gap:var(--space-2);display:flex}.ms-zoom-button{border:1px solid var(--neutral-medium-gray);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--neutral-dark-gray);cursor:pointer;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.ms-zoom-button:hover{background:var(--neutral-medium-gray);border-color:var(--neutral-dark-gray);color:var(--neutral-charcoal)}.ms-zoom-button:active{background:var(--neutral-dark-gray);color:var(--neutral-warm-white)}.ms-zoom-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ms-zoom-button-icon{width:14px;height:14px}.ms-zoom-percentage{text-align:center;min-width:60px;color:var(--neutral-charcoal);font-size:.8125rem;font-weight:500}.ms-zoom-percentage--interactive{padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.ms-zoom-percentage--interactive:hover{background:var(--neutral-medium-gray)}.ms-canvas-info{align-items:center;gap:var(--space-4);display:flex}.ms-canvas-dimensions{color:var(--neutral-dark-gray);font-size:.8125rem}.ms-canvas-units{color:var(--neutral-dark-gray);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-size:.8125rem}.ms-canvas-units:hover{background:var(--neutral-medium-gray);color:var(--neutral-charcoal)}.ms-status-indicator{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-2);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;display:flex}.ms-status-indicator--success{background:var(--primary-sage);color:#fff}.ms-status-indicator--warning{background:var(--accent-gold);color:var(--neutral-charcoal)}.ms-status-indicator--error{background:var(--primary-rose);color:#fff}.ms-status-indicator--info{background:var(--brand-primary);color:#fff}.ms-status-separator{background:var(--neutral-medium-gray);width:1px;height:20px}.ms-performance-indicator{align-items:center;gap:var(--space-1);color:var(--neutral-dark-gray);font-size:.75rem;display:flex}.ms-performance-dot{background:var(--primary-sage);border-radius:50%;width:6px;height:6px}.ms-performance-dot--warning{background:var(--accent-gold)}.ms-performance-dot--error{background:var(--primary-rose)}@media (max-width:1024px){.ms-shell-status-bar{padding:0 var(--space-2);gap:var(--space-2)}.ms-status-bar-left,.ms-status-bar-center,.ms-status-bar-right{gap:var(--space-2)}}@media (max-width:768px){.ms-status-bar-center{display:none}.ms-canvas-info{gap:var(--space-2)}.ms-canvas-dimensions{font-size:.75rem}.ms-zoom-controls{gap:var(--space-1)}.ms-zoom-button{width:24px;height:24px}.ms-zoom-percentage{min-width:50px;font-size:.75rem}}@media (max-width:480px){.ms-performance-indicator,.ms-canvas-dimensions{display:none}}.ms-zoom-button:focus-visible,.ms-zoom-percentage--interactive:focus-visible,.ms-canvas-units:focus-visible,.ms-status-item--interactive:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.ms-shell-canvas{background:#fff;flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative;overflow:visible!important}.ms-workspace{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#6b7280cc transparent;flex:1;position:relative;background:#fff!important;overflow:auto!important}.ms-workspace::-webkit-scrollbar{width:12px;height:12px}.ms-workspace::-webkit-scrollbar-thumb{background-color:#6b7280bf;background-clip:content-box;border:3px solid #0000;border-radius:8px}.ms-workspace::-webkit-scrollbar-thumb:hover{background-color:#4b5563e6}.ms-workspace::-webkit-scrollbar-track{background-color:#0000}.ms-workspace::-webkit-scrollbar-corner{background-color:#0000}.ms-canvas-container{will-change:transform;display:block;position:relative;transform:translateZ(0)}.ms-canvas-wrapper{position:relative}.ms-canvas-position-wrapper{background:#fff;width:fit-content;margin:0 auto;position:relative}.ms-canvas-position-wrapper>.MaskOverlay,.ms-canvas-position-wrapper>[class*=MaskOverlay]{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-shell-canvas-target{box-shadow:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;background:0 0;border:none;border-radius:0;display:block;position:relative;box-shadow:0 0 0 1px #00000014!important}.ms-shell-canvas-target canvas{box-shadow:none;border-radius:0;display:block}.ms-canvas-loading{align-items:center;gap:var(--space-4);padding:var(--space-6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--neutral-dark-gray);z-index:var(--z-shell);background:#ffffffe6;flex-direction:column;font-size:.875rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ms-canvas-overlay{pointer-events:none;z-index:var(--z-canvas-status);position:absolute;inset:0}.ms-canvas-overlay--interactive{pointer-events:auto}@media (max-width:768px){.ms-workspace{scrollbar-width:auto}.ms-workspace::-webkit-scrollbar{width:8px;height:8px}}.ms-shell-canvas-target:focus-visible{outline:2px solid var(--brand-primary);outline-offset:4px}.ms-shell-canvas,.ms-workspace,.ms-canvas-container,.ms-canvas-wrapper,.ms-canvas-centering-wrapper,.ms-shell-canvas-target,.ms-shell-canvas-target canvas,.canvas-area,.canvas-container,#shell-canvas-target{background:#fff!important}.ms-shell-main{overflow:hidden;flex:auto!important;height:auto!important;min-height:0!important;display:flex!important}.editor-main-content{padding-bottom:32px}.ms-workspace{margin-bottom:0!important}