:root{--bg-color-primary:#f9fafb;--bg-color-secondary:#ffffff;--text-color-primary:#111827;--text-color-secondary:#6b7280;--grid-line-color:#e5e7eb;--grid-highlight-color:#f3f4f6;--axis-color:#3b82f6;--control-bg:rgba(255,255,255,0.7);--control-button-bg:#e5e7eb;--control-button-hover-bg:#d1d5db;--control-button-disabled-bg:#e5e7eb;--control-button-text:#1f2937;--modal-bg:#ffffff;--modal-shadow:rgba(0,0,0,0.1);--border-color:rgba(0,0,0,0.1);--destructive-button-bg:#ef4444;--destructive-button-hover-bg:#dc2626;--input-bg:#f3f4f6;--success-color:#16a34a}body,html{margin:0;padding:0;overflow-x:hidden;overflow-y:auto;font-family:IBM Plex Sans,IBM Plex Sans Arabic,sans-serif;background-color:var(--bg-color-primary);color:var(--text-color-primary);width:100%;height:100%}body.panning,body.panning *{cursor:grabbing!important}#gridCanvas{border-radius:0;box-shadow:0 4px 12px rgba(0,0,0,.1);background-color:var(--bg-color-secondary);touch-action:none;display:block;cursor:crosshair}#gridCanvas.select-mode{cursor:default}#gridCanvas.paste-mode{cursor:copy}.draggable{cursor:grab;user-select:none}.dragging{cursor:grabbing!important}#controlsContainer{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:100;background-color:var(--control-bg);padding:8px;border-radius:12px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.1)}.control-button{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border:none;border-radius:8px;background-color:var(--control-button-bg);color:var(--text-color-secondary);font-size:18px;cursor:pointer;transition:background-color .2s ease,color .2s ease;position:relative;overflow:hidden}.control-button:hover{background-color:var(--control-button-hover-bg);color:var(--text-color-primary)}.control-button.active{background-color:var(--axis-color);color:white}.control-button.destructive{color:var(--destructive-button-bg)}.control-button.destructive:hover{background-color:var(--destructive-button-bg);color:white}.control-button[disabled]{cursor:not-allowed;opacity:.5}.control-button[disabled]:hover{background-color:var(--control-button-disabled-bg);color:var(--text-color-secondary)}.control-button[disabled].destructive:hover{background-color:var(--control-button-disabled-bg);color:var(--destructive-button-bg)}#notificationBadge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background-color:var(--destructive-button-bg);color:white;border-radius:50%;font-size:10px;font-weight:700;display:flex;justify-content:center;align-items:center;border:2px solid var(--control-bg);pointer-events:none;visibility:hidden;opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}#notificationBadge.visible{visibility:visible;opacity:1;transform:scale(1)}#notificationButton.has-notifications .icon{animation:bell-shake .82s cubic-bezier(.36,.07,.19,.97) both;transform-origin:top center}@keyframes bell-shake{0%,to{transform:rotate(0)}10%,30%,50%,70%,90%{transform:rotate(-10deg)}20%,40%,60%,80%{transform:rotate(10deg)}}#messageBox{top:20px;left:20px;background-color:var(--control-bg);color:var(--text-color-secondary);border:1px solid var(--border-color);font-size:13px;text-align:left;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.1);backdrop-filter:blur(5px)}#flashMessage,#messageBox{position:absolute;padding:8px 16px;border-radius:8px}#flashMessage{top:70px;left:50%;transform:translateX(-50%);background-color:var(--destructive-button-bg);color:white;font-size:14px;font-weight:500;opacity:0;visibility:hidden;transition:opacity .5s ease-in-out,visibility .5s ease-in-out,top .3s ease;z-index:2100;box-shadow:0 4px 10px rgba(0,0,0,.1)}#flashMessage.success{background-color:var(--success-color)}#flashMessage.show{opacity:1;visibility:visible;top:80px}#logoContainer{position:absolute;top:50px;right:50px;z-index:100;text-align:center}#logo{width:100px;height:auto;cursor:pointer;transition:transform .2s ease,opacity .2s ease;filter:drop-shadow(0 2px 5px rgba(0,0,0,.1))}#logo:hover{opacity:.8}#versionText{display:block;margin-top:4px;font-size:11px;font-weight:500;color:var(--text-color-secondary);letter-spacing:.5px;opacity:.8}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(249,250,251,.8);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}#deleteModal,#exportModal,#galleryModal,#newProjectModal,#notificationsModal,#overwriteModal,#userFolioModal{z-index:1001}#artworkDetailModal{z-index:1002}.modal-overlay.visible{opacity:1;visibility:visible}.modal-content{background-color:var(--modal-bg);padding:24px;border-radius:12px;box-shadow:0 10px 25px var(--modal-shadow);text-align:center;max-width:420px;transform:scale(.95);transition:transform .3s ease,background-color .3s ease;border:1px solid var(--border-color)}.modal-overlay.visible .modal-content{transform:scale(1)}.modal-content h3{margin-top:0;color:var(--text-color-primary);font-size:1.25rem}.modal-content p{color:var(--text-color-secondary);font-size:.9rem;line-height:1.5}.modal-buttons{margin-top:20px;display:flex;justify-content:center;gap:10px}.modal-button{padding:10px 20px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease,color .2s ease}.modal-button.confirm{background-color:var(--destructive-button-bg);color:white}.modal-button.confirm:hover{background-color:var(--destructive-button-hover-bg)}.modal-button.cancel{background-color:var(--control-button-bg);color:var(--text-color-primary)}.modal-button.cancel:hover{background-color:var(--control-button-hover-bg)}.modal-button.active{background-color:var(--axis-color);color:white}.modal-button:not(.active):hover{background-color:var(--control-button-hover-bg)}.icon{display:block;width:20px;height:20px}#statsBox{position:absolute;bottom:20px;right:284px;width:200px;background-color:var(--control-bg);padding:0;border-radius:12px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;color:var(--text-color-secondary);font-size:12px;display:block}#statsBoxHeader{padding:8px 12px;cursor:grab;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}#statsBoxHeader h4{margin:0;font-weight:500;color:var(--text-color-primary);font-size:14px}#statsBoxContent{padding:8px 12px}.stats-section{padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--border-color)}.stats-section:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}#anatomyStats{display:grid;grid-template-columns:1fr 1fr;gap:4px 32px}.stat-item span{font-weight:500;color:var(--text-color-primary);float:right}.slider-wrapper{display:flex;align-items:center;gap:8px}.slider-wrapper label{font-weight:500;width:90px;font-size:13px}.slider-wrapper input[type=range]{-webkit-appearance:none;appearance:none;width:100px;height:6px;background:var(--grid-line-color);border-radius:3px;outline:none;opacity:.8;transition:opacity .2s}.slider-wrapper input[type=range]:disabled{opacity:.4;cursor:not-allowed}.slider-wrapper input[type=range]:hover:not(:disabled){opacity:1}.slider-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--axis-color);cursor:pointer;border-radius:50%}.slider-wrapper input[type=range]:disabled::-webkit-slider-thumb{background:var(--text-color-secondary);cursor:not-allowed}.slider-wrapper input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--axis-color);cursor:pointer;border-radius:50%}.slider-wrapper input[type=range]:disabled::-moz-range-thumb{background:var(--text-color-secondary);cursor:not-allowed}.slider-wrapper span{font-variant-numeric:tabular-nums;width:20px;text-align:right;font-size:13px}#rulesBox{position:absolute;top:50px;left:20px;width:260px;background-color:var(--control-bg);padding:0;border-radius:8px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;color:var(--text-color-secondary);font-size:12px;display:block}#rulesBoxHeader{padding:8px 12px;cursor:grab;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}#rulesBoxHeader h4{margin:0;font-weight:500;color:var(--text-color-primary);font-size:14px}#minimizeRulesButton{background:none;border:none;color:var(--text-color-secondary);cursor:pointer;font-size:16px;padding:0 5px}#rulesBoxContent{padding:8px 12px}#rulesBoxContent h4{margin-top:10px;margin-bottom:4px;font-weight:600;color:var(--text-color-primary);font-size:12px}#rulesBoxContent h4:first-child{margin-top:0}#rulesBoxContent ul{list-style:none;padding:0;margin:0}#rulesBoxContent li{padding:2px 0;cursor:pointer;transition:color .2s ease}#rulesBoxContent li.checked{text-decoration:line-through;color:var(--text-color-primary)}#rulesBoxContent li.auto-validated{cursor:default}#rulesBoxContent li.auto-validated.checked{color:var(--success-color);text-decoration-color:var(--success-color)}#rulesBoxContent li:not(.checked).auto-validated{color:var(--destructive-button-bg);font-weight:500}#rulesBox.minimized #rulesBoxContent{display:none}#rulesBox.minimized{width:auto}#letterTrackerContainer{position:absolute;top:100px;left:50%;transform:translateX(-50%);width:fit-content;max-width:80%;background-color:var(--control-bg);padding:0;border-radius:8px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:101;color:var(--text-color-secondary);font-size:12px;display:none}#letterTrackerHeader{padding:6px 12px;cursor:grab;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}#letterTrackerHeader h4{margin:0;font-weight:500;color:var(--text-color-primary)}#letterTrackerContent{padding:8px;display:flex;flex-wrap:wrap;gap:6px;direction:rtl;max-height:100px;overflow-y:auto}.letter-box{width:30px;height:30px;background-color:var(--control-button-bg);border:1px solid var(--border-color);border-radius:6px;display:flex;justify-content:center;align-items:center;font-size:18px;font-family:IBM Plex Sans Arabic,sans-serif;color:var(--text-color-primary);cursor:pointer;transition:background-color .2s ease,opacity .2s ease}.letter-box:hover{background-color:var(--control-button-hover-bg)}.letter-box.completed{background-color:var(--success-color);opacity:.6;text-decoration:line-through}#authModal .modal-content{max-width:480px}#artworkDetailModal .modal-content,#authModal .modal-content,#editProfileModal .modal-content,#exportModal .modal-content,#forgotPasswordModal .modal-content,#infoModal .modal-content,#newProjectModal .modal-content,#notificationsModal .modal-content,#saveOptionsModal .modal-content,#saveProjectModal .modal-content,#userFolioModal .modal-content,#userInfoModal .modal-content,#userProfileSetupModal .modal-content{text-align:left}#galleryModal .modal-content{text-align:center}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form input,.auth-form textarea{padding:10px;border-radius:6px;border:1px solid var(--border-color);background-color:var(--input-bg);color:var(--text-color-primary);font-size:.9rem;font-family:inherit}.auth-form textarea{min-height:80px;resize:vertical;margin-top:15px}.auth-form button{padding:10px;border-radius:6px;border:none;background-color:var(--axis-color);color:white;font-weight:500;cursor:pointer;transition:background-color .2s ease}.auth-form button:disabled{background-color:var(--control-button-disabled-bg);cursor:not-allowed}.auth-form button:hover:not(:disabled){opacity:.9}.form-label{font-size:.85rem;font-weight:500;color:var(--text-color-secondary);margin-bottom:-4px}.community-text,.form-hint{font-size:.8rem;color:var(--text-color-secondary);margin-top:-8px;margin-bottom:4px}#auth-toggle,#forgot-password-container,#resend-verification-container{margin-top:12px;text-align:center;font-size:.85rem}#auth-toggle a,#forgot-password-link,#resend-verification-link{color:var(--axis-color);text-decoration:none;cursor:pointer}#auth-toggle a:hover,#forgot-password-link:hover,#resend-verification-link:hover{text-decoration:underline}#auth-message-container,#edit-message-container,#edit-profile-message-container,#forgot-pw-message-container,#profile-message-container,#save-message-container{margin-top:8px;text-align:center;font-size:.85rem;min-height:1.2em}#auth-error,#edit-profile-error,#forgot-pw-error,#profile-error{color:var(--destructive-button-bg)}#auth-success,#edit-profile-success,#forgot-pw-success,#profile-success,#save-success{color:var(--success-color)}#projectList{list-style:none;padding:0;max-height:200px;overflow-y:auto;margin-top:16px}#projectList li{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid var(--border-color)}#projectList li:last-child{border-bottom:none}.project-actions button{margin-left:8px;padding:4px 8px;border-radius:5px;font-size:.8rem}#notificationList{list-style:none;padding:0;max-height:400px;overflow-y:auto;margin-top:16px;display:flex;flex-direction:column;gap:12px}#notificationList li{padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:.9rem;background-color:var(--bg-color-primary)}#notificationList li:last-child{border-bottom:1px solid var(--border-color)}.notif-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.notif-date{font-size:.8rem;color:var(--text-color-secondary)}#notificationList .status-approved{color:var(--success-color);font-weight:500}#notificationList .status-rejected{color:var(--destructive-button-bg);font-weight:500}.rejection-reason{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color);color:var(--text-color-secondary)}.rejection-reason strong{color:var(--text-color-primary)}.account-container{position:relative}#login-tooltip{bottom:120%;background-color:var(--text-color-primary);color:var(--bg-color-primary);padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:110}#login-tooltip,#login-tooltip:after{position:absolute;left:50%;transform:translateX(-50%)}#login-tooltip:after{content:"";top:100%;border-width:5px;border-style:solid;border-color:var(--text-color-primary) transparent transparent transparent}#projectInfoContainer{position:absolute;top:20px;left:50%;transform:translateX(-50%);background-color:var(--control-bg);padding:6px 6px 6px 16px;border-radius:12px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;display:flex;align-items:center;gap:12px}#projectInfoTitleContainer{display:flex;flex-direction:column;align-items:center}#projectNameDisplay{font-weight:600;color:var(--text-color-primary);font-size:16px}#projectDescriptionDisplay,#projectRemixInfoDisplay{font-size:.8rem;color:var(--text-color-secondary);margin-top:2px}#projectActionsContainer{display:none;align-items:center;background-color:var(--control-button-bg);padding:4px;border-radius:8px}#projectActionsContainer a{padding:4px 8px;font-size:.8rem;font-weight:500;color:var(--text-color-secondary);text-decoration:none;border-radius:6px;transition:background-color .2s ease,color .2s ease}#projectActionsContainer a:hover{background-color:var(--control-button-hover-bg);color:var(--text-color-primary)}#projectNameSaveLink{color:var(--axis-color);font-weight:600}#projectNameSaveLink:hover{background-color:transparent;text-decoration:underline;color:var(--axis-color)}#projectInfoDeleteLink{color:var(--destructive-button-bg)}#projectInfoDeleteLink:hover{background-color:var(--destructive-button-bg);color:white}.script-type-container{margin-top:15px;margin-bottom:5px;display:flex;justify-content:center;gap:20px}.script-type-container label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem}#startTooltip{position:absolute;display:none;background-color:var(--axis-color);color:white;padding:6px 12px;margin-top:-5px;border-radius:8px;font-size:14px;font-weight:500;z-index:999;pointer-events:none;transform:translate(-50%,-120%)}#startTooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:6px;border-style:solid;border-color:var(--axis-color) transparent transparent transparent}#selectionContextMenu{display:none;flex-direction:column;gap:6px;padding:8px;border-radius:10px;border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:105}#selectionContextMenu,#stylesPanel{position:absolute;background-color:var(--control-bg);backdrop-filter:blur(8px)}#stylesPanel{bottom:20px;right:20px;width:254px;padding:0;border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:100;color:var(--text-color-secondary);font-size:12px;transition:background-color .3s ease,border-color .3s ease,opacity .3s ease,visibility .3s ease;display:block}#stylesPanelHeader{padding:8px 12px;cursor:grab;border-bottom:1px solid var(--border-color)}#stylesPanelHeader h4{margin:0;font-weight:500;color:var(--text-color-primary);font-size:14px}#stylesPanelContent{padding:12px;display:flex;flex-direction:column;gap:12px}.style-buttons-container{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.sliders-container{display:flex;flex-direction:column;gap:12px}.style-button{padding:6px;border:1px solid var(--control-button-bg);background-color:transparent;color:var(--text-color-secondary);border-radius:6px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;font-weight:500;display:flex;justify-content:center;align-items:center;height:36px;min-width:36px}.style-button:hover{background-color:var(--control-button-hover-bg);color:var(--text-color-primary)}.style-button.active{background-color:var(--axis-color);border-color:var(--axis-color);color:white}#draftsGrid,#galleryGrid,#myContributionsGrid,#myProjectsGrid,#othersGrid,#pendingGrid,#publishedGrid,#rejectedGrid,#reviewGrid,#userFolioGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem;max-height:65vh;overflow-y:auto;padding:.5rem}.gallery-grid-container{display:none}.gallery-grid-container.active{display:block}.gallery-item{position:relative;aspect-ratio:1/1;border-radius:8px;padding:10px;overflow:hidden;background-color:var(--bg-color-primary);border:1px solid var(--border-color);cursor:pointer;transition:transform .2s ease-in-out}.gallery-item:hover{transform:scale(1.05)}.gallery-item .artwork-svg{width:100%;height:100%;object-fit:cover}.gallery-item .artwork-svg>svg{width:100%;height:100%}.gallery-item-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);padding:1rem;color:white;opacity:0;transition:opacity .2s ease-in-out;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;height:100%}.gallery-item:hover .gallery-item-overlay{opacity:1}.gallery-item-overlay .gallery-item-info{flex-grow:1;display:flex;flex-direction:column;justify-content:flex-end}.like-container{position:absolute;top:40px;right:10px;gap:4px;background-color:rgba(0,0,0,.5);padding:2px 6px;border-radius:10px}.like-button,.like-container{display:flex;align-items:center}.like-button{background:none;border:none;cursor:pointer;padding:0}.like-icon{stroke:white;transition:fill .2s ease}.like-icon.filled{fill:#ef4444;stroke:#ef4444}.like-count{font-size:.8rem;font-weight:500;color:white}.project-overlay{justify-content:end}.project-overlay .project-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.project-overlay .project-actions .modal-button{padding:5px 10px;font-size:.8rem;margin-left:0}.project-status{font-size:.8rem;font-weight:600;padding:2px 6px;border-radius:4px;display:inline-block;color:white;margin-top:4px}.project-status.status-draft{background-color:#6b7280}.project-status.status-pending_approval{background-color:#f59e0b}.project-status.status-approved{background-color:var(--success-color)}.project-status.status-rejected{background-color:var(--destructive-button-bg)}.gallery-item-overlay h4{margin:0;font-size:1rem;font-weight:600;text-shadow:1px 1px 3px rgba(0,0,0,.7)}.gallery-item-overlay p{margin:0;font-size:.8rem;color:#e5e7eb;text-shadow:1px 1px 3px rgba(0,0,0,.7)}.gallery-item-overlay .artwork-title{font-style:italic;font-size:.85rem;margin-bottom:4px}.gallery-item-overlay .approval-date{font-size:.7rem;color:#9ca3af;margin-top:8px}#galleryGrid::-webkit-scrollbar,#myContributionsGrid::-webkit-scrollbar,#myProjectsGrid::-webkit-scrollbar{width:8px}#galleryGrid::-webkit-scrollbar-track,#myContributionsGrid::-webkit-scrollbar-track,#myProjectsGrid::-webkit-scrollbar-track{background:var(--control-button-bg);border-radius:4px}#galleryGrid::-webkit-scrollbar-thumb,#myContributionsGrid::-webkit-scrollbar-thumb,#myProjectsGrid::-webkit-scrollbar-thumb{background:var(--control-button-hover-bg);border-radius:4px}#galleryGrid::-webkit-scrollbar-thumb:hover,#myContributionsGrid::-webkit-scrollbar-thumb:hover,#myProjectsGrid::-webkit-scrollbar-thumb:hover{background:var(--axis-color)}#galleryTabsContainer{display:flex;border-bottom:2px solid var(--border-color);margin-bottom:1rem}.gallery-tab{padding:10px 20px;cursor:pointer;background:none;border:none;color:var(--text-color-secondary);font-weight:500;font-size:1rem;position:relative;transition:color .2s ease}.gallery-tab.active,.gallery-tab:hover{color:var(--text-color-primary)}.gallery-tab.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:var(--axis-color)}#colorPickersContainer{display:flex;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}#borderColorPaletteContainer,#colorPaletteContainer,#extendColorPaletteContainer,#shadowColorPaletteContainer{position:relative}#borderColorPalettePopup,#colorPalettePopup,#extendColorPalettePopup,#shadowColorPalettePopup{display:none;position:absolute;bottom:calc(100% + 10px);left:0;background-color:var(--modal-bg);padding:10px;border-radius:10px;border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:110;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:220px;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s ease}#borderColorPalettePopup.visible,#colorPalettePopup.visible,#extendColorPalettePopup.visible,#shadowColorPalettePopup.visible{display:grid;visibility:visible;opacity:1}.color-swatch{width:36px;height:36px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border-color .2s ease,transform .2s ease}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--axis-color)}#tutorialOverlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2000;display:none}#tutorialOverlay.active{display:block}#tutorialHighlight{box-shadow:0 0 0 9999px rgba(0,0,0,.7);border-radius:8px;pointer-events:none}#tutorialHighlight,#tutorialTooltip{position:absolute;transition:all .3s ease-in-out}#tutorialTooltip{background-color:var(--modal-bg);color:var(--text-color-primary);padding:16px;border-radius:10px;width:300px;max-width:90vw;z-index:2001;border:1px solid var(--border-color);box-shadow:0 5px 15px rgba(0,0,0,.2);opacity:0;transform:translateY(10px)}#tutorialTooltip.visible{opacity:1;transform:translateY(0)}#tutorialTooltip:after{content:"";position:absolute;border-style:solid;width:0;height:0}#tutorialTooltip.arrow-top:after{bottom:100%;left:50%;transform:translateX(-50%);border-width:0 8px 8px;border-color:transparent transparent var(--modal-bg) transparent}#tutorialTooltip.arrow-bottom:after{top:100%;left:50%;transform:translateY(-50%);border-width:8px 8px 0;border-color:var(--modal-bg) transparent transparent transparent}#tutorialTooltip.arrow-left:after{right:100%;top:50%;transform:translateY(-50%);border-width:8px 8px 8px 0;border-color:transparent var(--modal-bg) transparent transparent}#tutorialTooltip.arrow-right:after{left:100%;top:50%;transform:translateY(-50%);border-width:8px 0 8px 8px;border-color:transparent transparent transparent var(--modal-bg)}#tutorialTooltip h4{margin-top:0;font-size:1.1rem;color:var(--text-color-primary)}#tutorialTooltip p{font-size:.9rem;color:var(--text-color-secondary);line-height:1.5}#tutorialProgress{font-size:.8rem;color:var(--text-color-secondary);margin-bottom:10px}#tutorialNav{margin-top:16px;display:flex;justify-content:space-between;align-items:center}.tutorial-nav-button{padding:8px 16px;border:1px solid var(--control-button-bg);background-color:transparent;color:var(--text-color-secondary);border-radius:6px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;font-weight:500}.tutorial-nav-button:hover{background-color:var(--control-button-hover-bg);color:var(--text-color-primary)}#tutorialNav #endTutorialBtn{background-color:transparent}#tutorialNav #nextTutorialBtn{background-color:var(--axis-color);border-color:var(--axis-color);color:white}#tutorialNav #nextTutorialBtn:hover{opacity:.9;color:white;background-color:var(--axis-color)}#infoTabsContainer{display:flex;border-bottom:2px solid var(--border-color);margin-bottom:1.5rem}.info-tab{padding:10px 20px;cursor:pointer;background:none;border:none;color:var(--text-color-secondary);font-weight:500;font-size:1rem;position:relative;transition:color .2s ease}.info-tab.active,.info-tab:hover{color:var(--text-color-primary)}.info-tab.active{font-weight:600}.info-tab.active:after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background-color:var(--axis-color)}.info-tab-content{display:none;animation:fadeIn .3s ease-in-out}.info-tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.info-list{list-style-type:none;padding:0;margin:0;color:var(--text-color-secondary);line-height:1.8}.info-list li{padding-left:20px;position:relative}.info-list li:before{content:"•";position:absolute;left:0;color:var(--axis-color);font-weight:700}.shortcuts-list span{display:inline-block;background-color:var(--control-button-bg);padding:2px 6px;border-radius:4px;color:var(--text-color-primary);font-family:monospace;font-size:.85rem;margin-right:12px;min-width:150px;text-align:center}.about-container{display:flex;gap:20px;align-items:flex-start}.about-photo{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--border-color)}.about-text{flex:1}.about-text h4{margin-top:0;font-size:1.5rem;color:var(--text-color-primary)}.about-text p{font-size:.9rem;line-height:1.6;color:var(--text-color-secondary)}#instagramLink{display:inline-block;margin-top:12px;padding:8px 16px;background-color:var(--axis-color);color:white;text-decoration:none;border-radius:6px;font-weight:500;transition:background-color .2s ease}#instagramLink:hover{opacity:.9}#latestArtworksModal{position:fixed;bottom:20px;left:20px;width:400px;max-width:90vw;background-color:var(--control-bg);border-radius:8px;border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(8px);z-index:102;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease;display:none}#latestArtworksModal.visible{display:block;opacity:1;transform:translateY(0)}#latestArtworksHeader{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border-color)}#latestArtworksHeader h4{margin:0;font-size:14px;font-weight:500;color:var(--text-color-primary)}#closeLatestArtworksBtn{background:none;border:none;font-size:14px;line-height:1;cursor:pointer;color:var(--text-color-secondary);padding:2px 6px}#closeLatestArtworksBtn:hover{color:var(--text-color-primary)}#latestArtworksGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px}.latest-artwork-item{aspect-ratio:1/1;background-color:var(--bg-color-primary);border:1px solid var(--border-color);border-radius:8px;padding:8px;cursor:pointer;transition:transform .2s ease}.latest-artwork-item:hover{transform:scale(1.05)}.latest-artwork-item .artwork-svg,.latest-artwork-item .artwork-svg svg{width:100%;height:100%}#tipsModal{position:fixed;top:130px;right:20px;width:320px;background-color:var(--control-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(8px);z-index:103;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;visibility:hidden}#tipsModal.visible{visibility:visible;opacity:1;transform:translateY(0)}#tipContent{display:flex;align-items:flex-start;gap:12px;padding:12px}#tipIconContainer{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--control-button-bg);border-radius:8px}#tipIconContainer img{width:24px;height:24px}#tipText{font-size:13px;color:var(--text-color-primary);line-height:1.5;margin:0}#tipActions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border-color);padding:8px 12px 12px;margin-top:8px}#tipActions button{background:none;border:none;font-size:12px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background-color .2s}#dismissTipBtn{background-color:var(--axis-color);color:black}#dismissTipBtn:hover{opacity:.9}#disableTipsBtn{color:var(--text-color-secondary)}#disableTipsBtn:hover{background-color:var(--control-button-bg)}#profilePhotoUploadContainer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}#profilePhotoInput{display:none}#profilePhotoUploadContainer .form-label{margin-bottom:.5rem;display:block}.photo-upload-controls{display:flex;align-items:center;gap:10px}#profilePhotoPreview{width:60px;height:60px;border-radius:50%;object-fit:cover;background-color:var(--control-button-bg);border:2px solid var(--border-color)}#photoUploadProgress{font-size:.8rem;color:var(--text-color-secondary)}#photoUploadMessage{font-size:.8rem;min-height:1.2em}.photo-upload-buttons{display:flex;gap:8px}#userInfoPhoto{width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:2px solid var(--border-color);background-color:var(--control-button-bg)}#accountPhoto{width:24px;height:24px;border-radius:50%;object-fit:cover;display:none}#letterVariationsModal{position:absolute;display:none;background-color:var(--control-bg);padding:8px;border-radius:12px;border:1px solid var(--border-color);backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:102;transition:opacity .2s ease,transform .2s ease}#letterVariationsModal.visible{display:block}#letterVariationsHeader{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px;border-bottom:1px solid var(--border-color);margin-bottom:8px}#letterVariationsHeader h4{margin:0;font-weight:500;color:var(--text-color-primary);font-size:14px}#closeVariationsBtn{background:none;border:none;font-size:16px;line-height:1;cursor:pointer;color:var(--text-color-secondary);padding:2px 6px}#closeVariationsBtn:hover{color:var(--text-color-primary)}#letterVariationsContent{display:flex;gap:8px;max-width:400px;overflow-x:auto;padding-bottom:4px}.variation-item{width:60px;height:60px;padding:5px;background-color:var(--control-button-bg);border:1px solid transparent;border-radius:8px;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.variation-item:hover{background-color:var(--control-button-hover-bg);border-color:var(--axis-color)}.variation-item .artwork-svg,.variation-item .artwork-svg svg{width:100%;height:100%}#editProfileModal .modal-content{max-width:800px}#artworkDetailModal .modal-content,#userFolioModal .modal-content{max-width:90vw;width:1000px;max-height:85vh;display:flex;flex-direction:column}.artwork-detail-container{display:flex;gap:24px;flex:1;min-height:0}.artwork-detail-preview{flex:2;background-color:var(--bg-color-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:1rem;min-height:0}.artwork-detail-preview .artwork-svg{max-width:100%;max-height:100%}.artwork-detail-preview .artwork-svg svg{width:100%;height:100%;object-fit:contain;height:-webkit-fill-available}.artwork-detail-preview svg{height:-webkit-fill-available}.artwork-detail-info{flex:1}.artwork-detail-info h3{font-size:1.75rem;margin-bottom:.5rem}.artwork-detail-info p{font-size:.8rem;line-height:1.5}#artworkDetailDesign{font-size:1.25rem;font-style:italic;margin-bottom:1.5rem;color:var(--text-color-primary)}.artwork-detail-artist-info{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color);display:flex;align-items:center;gap:12px}.artwork-detail-artist-info-name{cursor:pointer}.artwork-detail-artist-info-name:hover{text-decoration:underline}#artworkDetailArtistPhoto{width:60px;height:60px;border-radius:50%;object-fit:cover;background-color:var(--control-button-bg);border:2px solid var(--border-color)}#artworkDetailStatsContainer{margin-top:.2rem;padding-top:.2rem;border-top:1px solid var(--border-color)}#artworkDetailStatsContainer h4{font-size:1rem;font-weight:600;margin-bottom:1rem}#artworkDetailAnatomyStatsGrid,#artworkDetailStatsGrid{display:grid;gap:.1rem 1rem;font-size:.8rem;color:var(--text-color-secondary)}#artworkDetailAnatomyStatsGrid{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}#artworkDetailAnatomyStatsGrid p,#artworkDetailStatsGrid p{margin:0;display:flex;justify-content:space-between}#artworkDetailAnatomyStatsGrid strong,#artworkDetailStatsGrid strong{color:var(--text-color-primary);font-weight:500}#userFolioModal .modal-content{max-width:80vw;width:1200px}.user-folio-header{display:flex;gap:20px;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color);margin-bottom:1rem}#userFolioArtistPhoto{width:100px;height:100px;border-radius:50%;object-fit:cover;background-color:var(--control-button-bg);border:2px solid var(--border-color);flex-shrink:0}.user-folio-info{display:flex;flex-direction:column}#userFolioArtistName{font-size:2rem;font-weight:600;margin:0}#userFolioArtistBio{font-size:.9rem;color:var(--text-color-secondary);line-height:1.6;margin-top:8px;max-height:60px;overflow-y:auto}.user-folio-links{margin-top:auto;padding-top:8px;display:flex;gap:16px;align-items:center}.user-folio-links a{color:var(--axis-color);text-decoration:none;font-weight:500;font-size:.9rem;transition:text-decoration .2s ease}.user-folio-links a:hover{text-decoration:underline}.edit-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:1rem}.edit-profile-grid .auth-form{gap:16px}#editProfileForm .form-col-1,#editProfileForm .form-col-2{display:flex;flex-direction:column;gap:16px}#editProfileForm .form-col-2{justify-content:space-between}#editProfileForm #editBio{min-height:120px;flex-grow:1}#editProfileModal .auth-form button[type=submit]{grid-column:1/-1;margin-top:8px}@media (max-width:768px){.artwork-detail-container{flex-direction:column}.artwork-detail-preview{min-height:250px}.user-folio-header{flex-direction:column;align-items:center;text-align:center}.user-folio-links{justify-content:center}.edit-profile-grid{grid-template-columns:1fr}}