:root{--color-bg-primary: #F1F5F9;--color-bg-secondary: #FFFFFF;--color-bg-tertiary: #F8FAFC;--color-bg-accent: #E0E7FF;--color-text-primary: #1E293B;--color-text-secondary: #64748B;--color-text-accent: #3730A3;--color-border-primary: #E2E8F0;--color-border-secondary: #CBD5E1;--color-accent-primary: #4F46E5;--color-accent-secondary: #6366F1;--sans-font: "Inter", sans-serif;--serif-font: "Playfair Display", serif;--mono-font: "Roboto Mono", monospace;--cursor-grab: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>') 12 12, auto;--cursor-grabbing: grabbing;--left-sidebar-width: 16rem;--right-sidebar-width: 18rem}html{height:100vh}body{height:100%;font-family:var(--sans-font);background-color:var(--color-bg-primary);color:var(--color-text-primary);transition:background-color .3s;overflow:hidden}#app-container{height:calc(100vh - 41px)}main.main-content{display:flex;flex-direction:column;min-height:0;transition:padding-bottom .3s cubic-bezier(.4,0,.2,1)}#canvas-container{flex:1;overflow:auto}.no-select{-webkit-user-select:none;user-select:none}#app-container.left-sidebar-collapsed{--left-sidebar-width: 0rem}#app-container.right-sidebar-collapsed{--right-sidebar-width: 0rem}.sidebar{background-color:var(--color-bg-secondary);border-color:var(--color-border-primary);transition:width .3s ease-in-out,padding .3s ease-in-out,border-width .3s ease-in-out;overflow:hidden;white-space:nowrap}#left-sidebar{width:var(--left-sidebar-width);flex-shrink:0}#right-sidebar{width:var(--right-sidebar-width);flex-shrink:0}#app-container.left-sidebar-collapsed #left-sidebar{padding-left:0;padding-right:0;border-right-width:0}#app-container.right-sidebar-collapsed #right-sidebar{padding-left:0;padding-right:0;border-left-width:0}.toolbar{background-color:var(--color-bg-secondary);border-color:var(--color-border-primary)}.ui-button:hover{background-color:var(--color-bg-tertiary)}.active-toggle{background-color:var(--color-bg-accent);color:var(--color-text-accent)}.ui-select{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary)}.divider{background-color:var(--color-border-primary)}.modal-content{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.modal-confirm-button{background-color:var(--color-accent-primary);color:#fff}.modal-confirm-button:hover{opacity:.9}.modal-cancel-button{background-color:var(--color-border-primary);color:var(--color-text-primary)}.modal-cancel-button:hover{background-color:var(--color-border-secondary)}.export-option{display:block;width:100%;padding:.5rem 1rem;text-align:left;font-size:.875rem;background-color:var(--color-bg-secondary);color:var(--color-text-primary)}.export-option:hover{background-color:var(--color-bg-tertiary)}#export-menu{background-color:var(--color-bg-secondary)}.collapsible-panel{border-color:var(--color-border-primary)}.panel-header{background-color:var(--color-bg-tertiary)}.panel-title{color:var(--color-text-primary)}.panel-chevron.collapsed{transform:rotate(-90deg)}.panel-content.collapsed{display:none}.tab-button{background-color:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;transition:color .2s,border-color .2s;border-bottom:2px solid transparent;padding:.75rem;flex:1 1 0%;font-size:.875rem;font-weight:500;text-align:center}.tab-button.active{color:var(--color-accent-primary);border-color:var(--color-accent-primary)}.tab-panel{display:none}.tab-panel.active{display:block}.preview-wrapper{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);box-shadow:0 1px 2px #0000000d;transition:border-color .2s,box-shadow .2s,opacity .2s}.preview-wrapper:hover{border-color:var(--color-accent-secondary);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;opacity:.9}.selection-box{position:absolute;box-sizing:border-box;border:1px solid var(--color-accent-secondary);z-index:10000;pointer-events:none}.selection-box .handle{position:absolute;width:12px;height:12px;background-color:var(--color-bg-secondary);border:2px solid var(--color-accent-secondary);border-radius:9999px;transform:translate(-50%,-50%);z-index:10001;pointer-events:auto}.marquee-box{position:absolute;border:1px solid var(--color-accent-primary);background-color:#4f46e51a;z-index:10002;pointer-events:none}.selection-box .handle.n{top:0;left:50%;cursor:ns-resize}.selection-box .handle.s{top:100%;left:50%;cursor:ns-resize}.selection-box .handle.e{top:50%;left:100%;cursor:ew-resize}.selection-box .handle.w{top:50%;left:0;cursor:ew-resize}.selection-box .handle.nw{top:0;left:0;cursor:nwse-resize}.selection-box .handle.ne{top:0;left:100%;cursor:nesw-resize}.selection-box .handle.sw{top:100%;left:0;cursor:nesw-resize}.selection-box .handle.se{top:100%;left:100%;cursor:nwse-resize}.selection-box .handle.rotate{top:-30px;left:50%;width:16px;height:16px;cursor:var(--cursor-grab);background-color:var(--color-accent-secondary)}.selection-box .handle.rotate:active{cursor:var(--cursor-grabbing)}.selection-box .rotation-line{position:absolute;width:1px;height:22px;background-color:var(--color-accent-secondary);left:50%;top:100%;transform:translate(-50%);pointer-events:none}#grid-pattern{background-image:linear-gradient(var(--color-border-secondary, rgba(0,0,0,.05)) 1px,transparent 1px),linear-gradient(90deg,var(--color-border-secondary, rgba(0,0,0,.05)) 1px,transparent 1px);background-size:20px 20px;opacity:.2;z-index:1}#canvas{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;transform-origin:top left;background-color:#fff;overflow:visible}#canvas .group{cursor:move}#canvas .group.is-locked{cursor:not-allowed}#canvas-placeholder{z-index:2;color:var(--color-text-secondary);opacity:0;transition:opacity .3s}#canvas-placeholder.visible{opacity:1}#art-background{z-index:0;background-size:cover;background-position:center}[contenteditable]{outline:none;cursor:text}[contenteditable=true]{outline:2px solid var(--color-accent-secondary)!important;box-shadow:0 0 0 4px var(--color-bg-accent)}.canvas-button-element{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;box-sizing:border-box}.image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--color-bg-tertiary);border:2px dashed var(--color-border-secondary);color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;text-align:center;padding:1rem;box-sizing:border-box}.canvas-table{width:100%;height:100%;border-collapse:collapse}.canvas-table th,.canvas-table td{border:1px solid var(--color-border-secondary);padding:8px;min-width:50px}.canvas-table th{background-color:var(--color-bg-tertiary)}.skillbar-track{width:100%;height:100%;background-color:var(--color-border-primary);border-radius:9999px;overflow:hidden}.skillbar-bar{height:100%;background-color:var(--color-accent-primary);border-radius:9999px}.canvas-icon{color:var(--color-text-primary)}.canvas-icon svg{width:100%;height:100%;stroke:currentColor;fill:none}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2rem;padding:0;border:none;border-radius:.375rem;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid var(--color-border-secondary);border-radius:.375rem}input[type=color]::-moz-color-swatch{border:1px solid var(--color-border-secondary);border-radius:.375rem}.prop-group{background-color:var(--color-bg-tertiary)}.prop-group .grid{align-items:center}.prop-label{color:var(--color-text-secondary);display:block;margin-bottom:.25rem}.prop-input,.prop-select{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary);color:var(--color-text-primary);border-width:1px;box-shadow:0 1px 2px #0000000d}.prop-align-button[data-active=true]{background-color:var(--color-bg-accent)}#delete-element-btn{background-color:#ef44441a;color:#dc2626}#delete-element-btn:hover{background-color:#ef444433}.prop-align-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.prop-align-grid .ui-button{display:flex;align-items:center;justify-content:center}.color-palette-container{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary);margin-top:8px}.color-swatch{width:24px;height:24px;border-radius:9999px;border:2px solid var(--color-border-secondary);cursor:pointer;transition:transform .1s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.add-btn{display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-tertiary);color:var(--color-text-secondary)}#icon-list .icon-modal-button{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:.375rem;color:var(--color-text-secondary);transition:background-color .2s,color .2s;border:1px solid transparent}#icon-list .icon-modal-button:hover{background-color:var(--color-bg-accent);color:var(--color-text-accent);border-color:var(--color-accent-secondary)}#icon-list .icon-modal-button svg{width:24px;height:24px}.canvas-rating-wrapper{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;gap:4px}.canvas-rating-wrapper svg{width:100%;height:100%}.sidebar-toggle-btn{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);box-shadow:0 1px 3px #0000001a;border-radius:.375rem;font-size:.75rem;font-weight:500;white-space:nowrap;z-index:40}.sidebar-toggle-btn .sidebar-toggle-label{display:none}.sidebar-toggle-btn.collapsed .sidebar-toggle-label{display:block}#left-sidebar-toggle{top:5rem;left:var(--left-sidebar-width);transform:translate(.5rem);transition:left .3s ease-in-out}#right-sidebar-toggle{top:5rem;right:var(--right-sidebar-width);transform:translate(-.5rem);transition:right .3s ease-in-out}#thumbnail-toggle{position:absolute;bottom:1rem;left:var(--left-sidebar-width);transform:translate(.5rem);transition:bottom .3s cubic-bezier(.4,0,.2,1),left .3s ease-in-out}#app-container:not(.thumbnail-strip-collapsed) #thumbnail-toggle{bottom:9rem}.layer-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-radius:.375rem;transition:background-color .2s;cursor:pointer}.layer-item:hover{background-color:var(--color-bg-tertiary)}.layer-item.is-active{background-color:var(--color-bg-accent);color:var(--color-text-accent);font-weight:500}.layer-item-content{display:flex;align-items:center;flex-grow:1;min-width:0}.layer-item .layer-actions{display:none;align-items:center;gap:.25rem;margin-left:auto;padding-left:.5rem}.layer-item:hover .layer-actions{display:flex}.layer-item .layer-actions button{color:var(--color-text-secondary)}.layer-item .layer-actions button:hover{color:var(--color-text-primary)}.layer-item.is-hidden{opacity:.5}.layer-item.is-locked{cursor:not-allowed}.layer-item.is-locked .layer-name{font-style:italic;color:var(--color-text-secondary)}.layer-group-container{border-left:2px solid var(--color-border-primary);margin-left:4px;padding-left:8px}.layer-group-header{font-weight:600;cursor:pointer}.layer-item.is-active-group{background-color:transparent!important}.layer-group-header.is-active{background-color:var(--color-bg-accent);color:var(--color-text-accent)}.layer-child-item{padding-left:20px}.layer-item-icon{width:1rem;height:1rem;margin-right:.5rem;flex-shrink:0}.delete-layer-btn:hover{color:#ef4444!important}.ungroup-btn{opacity:.5;transition:opacity .2s}.layer-item:hover .ungroup-btn{opacity:1}.ungroup-btn:hover{background-color:var(--color-bg-accent)!important}.layer-item.ghost{opacity:.4;background-color:var(--color-bg-accent)}.layer-item.drag-over-indicator{border-top:2px solid var(--color-accent-primary)}.layer-item[draggable=true]{cursor:grab}.layer-item[draggable=true]:active{cursor:grabbing}.ruler{background-color:var(--color-bg-secondary);overflow:hidden;pointer-events:all;display:none}.ruler.visible{display:block}.ruler canvas{position:absolute}#ruler-corner{background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-primary);border-right:1px solid var(--color-border-primary);display:none}#ruler-corner.visible{display:block}.guide{position:absolute;background-color:var(--color-accent-primary);z-index:9998;pointer-events:all}.guide.horizontal{width:100%;height:1px;cursor:ns-resize}.guide.vertical{height:100%;width:1px;cursor:ew-resize}.smart-guide{position:absolute;background-color:#ef4444;z-index:9999;pointer-events:none}.smart-guide.horizontal{width:100%;height:1px}.smart-guide.vertical{height:100%;width:1px}#margin-overlay{border:1px solid rgba(99,102,241,.5);box-sizing:border-box;z-index:2;display:none}#bleed-overlay{border:1px solid rgba(239,68,68,.5);box-sizing:border-box;z-index:0;display:none}#thumbnail-strip{position:absolute;bottom:0;left:var(--left-sidebar-width);right:var(--right-sidebar-width);height:8rem;background-color:var(--color-bg-secondary);box-shadow:0 -2px 10px #0000001a;border-top:1px solid var(--color-border-primary);z-index:30;transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1),left .3s ease-in-out,right .3s ease-in-out}#thumbnail-strip.collapsed{transform:translateY(100%)}#app-container:not(.thumbnail-strip-collapsed) .main-content{padding-bottom:8rem}#thumbnail-list{min-width:0}.thumb-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:grab;padding:4px;border-radius:4px;border:2px solid transparent;position:relative}.thumb-item:active{cursor:grabbing}.thumb-item.active{border-color:var(--color-accent-primary)}.thumb-item .thumb-preview{height:80px;aspect-ratio:.707;width:auto;background-color:#fff;box-shadow:0 1px 3px #0000001a;border:1px solid var(--color-border-primary);position:relative;overflow:hidden;pointer-events:none}.thumb-item .thumb-preview-content{position:absolute;top:50%;left:50%;transform-origin:center center}.thumb-item .thumb-label{font-size:10px;color:var(--color-text-secondary);pointer-events:none}.thumb-item.ghost{opacity:.4;background-color:var(--color-bg-accent)}.toast{display:flex;align-items:center;background-color:var(--color-bg-secondary);color:var(--color-text-primary);padding:.75rem 1.25rem;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid var(--color-border-primary);transform:translate(calc(100% + 1rem));transition:transform .4s cubic-bezier(.25,1,.5,1);position:relative;overflow:hidden}.toast.show{transform:translate(0)}.toast.success .toast-icon{color:#22c55e}.toast.error .toast-icon{color:#ef4444}.toast.info .toast-icon{color:#3b82f6}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background-color:var(--color-accent-primary);width:100%;animation:shrink 3s linear forwards}@keyframes shrink{0%{width:100%}to{width:0%}}.toast .toast-progress-container{width:100%;background-color:var(--color-border-primary);border-radius:9999px;height:6px;margin-top:8px;overflow:hidden}.toast .toast-progress-bar{height:100%;background-color:var(--color-accent-primary);border-radius:9999px;transition:width .3s ease}html{scrollbar-width:thin;scrollbar-color:#94A3B8 var(--color-bg-tertiary)}html::-webkit-scrollbar{width:12px;height:12px}html::-webkit-scrollbar-track{background-color:var(--color-bg-tertiary)}html::-webkit-scrollbar-thumb{background-color:#94a3b8;border-radius:10px;border:3px solid var(--color-bg-tertiary)}html::-webkit-scrollbar-thumb:hover{background-color:var(--color-accent-primary)}.overflow-auto,.overflow-y-auto,.overflow-x-auto{scrollbar-width:thin;scrollbar-color:#94A3B8 var(--color-bg-tertiary)}.overflow-auto::-webkit-scrollbar,.overflow-y-auto::-webkit-scrollbar,.overflow-x-auto::-webkit-scrollbar{width:12px;height:12px}.overflow-auto::-webkit-scrollbar-track,.overflow-y-auto::-webkit-scrollbar-track,.overflow-x-auto::-webkit-scrollbar-track{background-color:var(--color-bg-tertiary)}.overflow-auto::-webkit-scrollbar-thumb,.overflow-y-auto::-webkit-scrollbar-thumb,.overflow-x-auto::-webkit-scrollbar-thumb{background-color:#94a3b8;border-radius:10px;border:3px solid var(--color-bg-tertiary)}.overflow-auto::-webkit-scrollbar-thumb:hover,.overflow-y-auto::-webkit-scrollbar-thumb:hover,.overflow-x-auto::-webkit-scrollbar-thumb:hover{background-color:var(--color-accent-primary)}#context-menu{min-width:180px;background-color:var(--color-bg-secondary);border-radius:.5rem;padding:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid var(--color-border-primary);display:none}.context-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem;font-size:.875rem;border-radius:.25rem;cursor:pointer;background:none;border:none;color:var(--color-text-primary)}.context-menu-item:hover{background-color:var(--color-bg-tertiary)}.context-menu-item .shortcut{color:var(--color-text-secondary);font-size:.75rem}.context-menu-divider{height:1px;background-color:var(--color-border-primary);margin:.5rem 0}#confirmation-modal,#icon-modal,#shortcuts-modal,#drawing-modal{z-index:20000}#tour-overlay{z-index:30000}#toast-container{z-index:40000}#tour-overlay{position:fixed;inset:0;display:none;background-color:transparent;pointer-events:none}#tour-highlight-box{position:fixed;display:none;z-index:30001;border-radius:6px;box-shadow:0 0 0 9999px #0f172ab3;border:2px solid var(--color-accent-primary);transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease;pointer-events:none}.tour-popover{position:fixed;background-color:var(--color-bg-secondary);color:var(--color-text-primary);padding:1.25rem;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid var(--color-border-primary);z-index:30002;transform-origin:top left;transition:top .3s ease,left .3s ease;pointer-events:auto}.tour-popover h3{font-size:1.125rem;font-weight:700;margin-bottom:.75rem}.tour-popover p{font-size:.875rem;line-height:1.6;margin-bottom:1.25rem}.tour-navigation{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--color-border-primary);padding-top:.75rem;margin-top:1rem}.tour-progress{font-size:.75rem;color:var(--color-text-secondary)}.tour-buttons{display:flex;gap:.5rem}.tour-buttons button{padding:.5rem 1rem;border:none;border-radius:.375rem;font-size:.875rem;cursor:pointer}.tour-buttons button:disabled{opacity:.5;cursor:not-allowed}.tour-close-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.5rem;font-weight:700;color:var(--color-text-secondary);cursor:pointer}.tour-close-btn:hover{color:var(--color-text-primary)}.tour-popover-center{transform:translate(-50%,-50%)}.shortcut-kbd{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:4px;padding:2px 6px;font-family:Roboto Mono,monospace;font-size:.8em;box-shadow:0 1px 1px #0000001a}#app-footer{position:absolute;bottom:0;left:0;width:100%;height:40px;background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border-primary);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;box-sizing:border-box}#app-footer .copyright-text{font-size:.75rem;color:var(--color-text-secondary)}#app-footer .footer-links{display:flex;align-items:center;gap:.75rem}#app-footer .footer-link{font-size:.75rem;color:var(--color-text-secondary);text-decoration:none;transition:color .2s}#app-footer .footer-link:hover{color:var(--color-text-primary);text-decoration:underline}#app-footer .footer-link-separator{font-size:.75rem;color:var(--color-border-secondary);-webkit-user-select:none;user-select:none}#drawing-canvas-container{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);position:relative;width:100%;aspect-ratio:16 / 9}#drawing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}#drawing-toolbar input[type=color]{width:2.5rem;height:2.5rem;border-radius:.375rem;border:1px solid var(--color-border-secondary)}#drawing-toolbar input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:.5rem;background:var(--color-bg-tertiary);border-radius:9999px;outline:none;border:1px solid var(--color-border-primary)}#drawing-toolbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.25rem;height:1.25rem;background:var(--color-accent-primary);cursor:pointer;border-radius:9999px}#drawing-toolbar input[type=range]::-moz-range-thumb{width:1.25rem;height:1.25rem;background:var(--color-accent-primary);cursor:pointer;border-radius:9999px;border:none}