body{margin:0;font-family:Georgia,serif;background:#f2f2f2;color:#000}.hero-container{display:flex;flex-direction:column;min-height:100vh}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 3rem;background-color:#f2f2f2;position:relative}.logo{font-size:1.8rem;color:#000}.logo em{font-style:italic;color:#000}.navbar nav a{margin-left:1.5rem;color:#000;text-decoration:none;font-style:italic}.mode-toggle{font-size:1.5rem;cursor:pointer;color:#ccc}.hero-content{text-align:center;padding-block:6rem;flex-grow:1}.hero-content-skintone{animation:colorCycle 6s ease-in-out infinite}.hero-content h2{font-size:2.5rem;color:#1a1a1a}.hero-content h1.highlight{font-size:4rem;font-style:italic;color:#000}.hero-content p{margin:2rem auto;max-width:700px;font-size:1.3rem;color:#000}.hero-buttons button{margin:0 1rem;padding:.8rem 1.6rem;font-size:1.1rem;background:none;border:2px solid black;color:#000;cursor:pointer;transition:.3s ease}.hero-buttons button:hover{background-color:#ffdab9;color:#000;border-color:#ffdab9}.hero-upload_photo-main-container{display:grid;grid-template-columns:1fr 1fr;margin-block-start:10rem;width:65%}.hero-upload_photo-description{display:flex;align-items:center;justify-content:center;flex-direction:column}.logo.mobile-only{display:block;font-family:Georgia,serif;font-size:2rem;font-style:italic;font-weight:700;color:#000;text-decoration:none}.logo.desktop-only{display:none;font-family:Georgia,serif;font-size:2rem;font-style:italic;font-weight:700;color:#000;margin-right:2rem}.nav-desktop{display:none}.nav-link-custom{font-family:Georgia,serif;font-size:1.1rem;font-style:italic;text-underline-offset:4px;transition:.1s}.nav-link-custom a{color:#ddd;text-decoration:none;transition:text-decoration .1s,color .1s}.nav-link-custom a:hover{text-decoration:underline;color:#ffdab9}.mobile-nav-dropdown .nav-link-custom a{color:#111}.footer-container{color:#fff;background-color:#000;display:flex;align-items:center;justify-content:center;padding-block:3rem}.footer-logo{font-style:italic;color:#fff;text-decoration:none;font-family:Georgia,serif;padding-right:.5rem}.footer-logo_copyrights{font-size:small;color:#737373}.hero-content_contact-support_machine-learning-team>a{text-decoration:none;color:#000;display:flex;align-items:center;justify-content:center;flex-direction:row;font-size:large}.hero-content_contact-support_machine-learning-team>a:hover{text-decoration:underline;color:#29c6df}.hero-content_contact-support_frontend-team>a{text-decoration:none;color:#000;display:flex;align-items:center;justify-content:center;flex-direction:row;font-size:large}.hero-content_contact-support_frontend-team>a:hover{text-decoration:underline;color:#29c6df}.hamburger-menu{display:block;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;height:40px;width:40px;padding:0;margin-left:auto;z-index:1001}.hamburger-bar{display:block;width:26px;height:3px;margin:4px 0;background:#222;border-radius:2px;transition:.3s}.mobile-nav-dropdown{position:absolute;top:65px;right:2rem;background:#fff;border-radius:.7rem;box-shadow:0 4px 16px #00000021;padding:1.2rem 2rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:1.2rem;z-index:1000;min-width:140px}@media (min-width: 768px){.logo.mobile-only{display:none}.logo.desktop-only{display:block}}@media (min-width: 768px){.hamburger-menu{display:none}}@media (min-width: 768px){.mobile-nav-dropdown{display:none}}@media (min-width: 768px){.nav-desktop{display:flex;align-items:center;justify-content:center;gap:1.5rem}}@media screen and (max-width: 800px){.hero-upload_photo-main-container{grid-template-columns:1fr;width:380px;margin-block-start:5rem}}@keyframes colorCycle{0%{color:#e0cbba}25%{color:#f7c59f}50%{color:#e9bcb7}75%{color:#303031}to{color:#e0cbba}}@media screen and (max-width: 768px){.dragfai-logo{display:none}}.dragfai-logo img{width:40px;height:40px;display:block}.upload-info{text-align:left;margin-bottom:1.5rem}.upload-title{font-size:1.3rem;font-weight:500;margin-bottom:.5rem;color:#222}.upload-tip{font-size:.95rem;color:#888}.upload-arrow{margin:0 1rem;display:none;color:#b48a78;transition:transform .2s}.desktop-arrow{display:none}.mobile-arrow{display:flex;margin:1rem 0}.upload-dropzone{position:relative;width:100%;max-width:350px;min-height:220px;background:#f8f8f8;border:2px dashed #b48a78;border-radius:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:1.5rem 0;transition:background .2s,border-color .2s;overflow:hidden}.upload-dropzone:hover{background:#fff7f0;border-color:#e0a96d}.upload-icon{margin-bottom:.7rem;color:#b48a78}.upload-filename{margin-top:.5rem;color:#b48a78;font-size:.98rem}.upload-preview{margin-top:1rem;max-width:90%;max-height:120px;border-radius:.7rem;box-shadow:0 2px 8px #00000014;border:1px solid #e0a96d}.upload-dropzone-react{position:relative;width:100%;max-width:350px;min-height:220px;background:#f8f8f8;border:2px dashed #b48a78;border-radius:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:1.5rem 0;transition:background .2s,border-color .2s;overflow:hidden;text-align:center}.upload-dropzone-react:hover{background:#fff7f0;border-color:#e0a96d}.upload-icon-svg{font-size:2.5rem;margin-bottom:.7rem;color:#b48a78;display:block}.upload-input{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;cursor:pointer;z-index:2}.upload-dropzone-text{text-align:center;z-index:1}.upload-dropzone-text small{color:#888;display:block;margin-top:.3rem}.upload-preview-container{display:flex;flex-direction:column;align-items:center;max-width:350px;margin:1.5rem auto;background:#f8f8f8;border-radius:1.2rem;border:1.5px solid #e0a96d;padding:1.5rem 1rem 1rem;box-shadow:0 2px 8px #0000000f}.upload-preview-img{width:100%;max-width:300px;max-height:220px;border-radius:.7rem;box-shadow:0 2px 8px #00000014;border:1px solid #e0a96d;object-fit:contain;transition:opacity .3s}.upload-preview-img.opacity-50{opacity:.5}.upload-preview-actions{display:flex;gap:1rem;margin-top:1.2rem}.upload-btn{padding:.6rem 1.3rem;font-size:1rem;border-radius:.6rem;border:none;background:#e0a96d;color:#fff;font-weight:500;cursor:pointer;transition:background .2s,color .2s}.upload-btn.outline{background:#fff;color:#b48a78;border:1.5px solid #e0a96d}.upload-btn:disabled{opacity:.6;cursor:not-allowed}.upload-message{margin-top:1.2rem;font-size:.98rem;text-align:center}.upload-message.error{color:#d32f2f}.upload-message.uploading{color:#b48a78}.upload-message-loading{display:flex;flex-direction:column;align-items:center;gap:.3rem}.upload-dots{font-size:1.3rem;color:#b48a78;letter-spacing:.2em;animation:blink 1.2s infinite}.upload-message-text{font-size:1rem;color:#b48a78;margin-top:.2rem;transition:opacity .3s}.upload-photo-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:2rem auto;max-width:600px;padding:1.5rem}.upload-dropzone-react,.upload-preview-container{margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero-content{display:flex;flex-direction:column;align-items:center}@media (max-width: 600px){.upload-photo-container{padding:.5rem}.upload-dropzone-react,.upload-preview-container{max-width:95vw}}@media (min-width: 768px){.desktop-arrow{display:flex}.mobile-arrow{display:none}}.analysis-container{margin:0 auto;min-height:100vh;width:100%;max-width:900px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:2rem 1rem;font-family:Georgia,serif;background:#f7f5f2}.analysis-title{width:100%;text-align:center;font-size:2.2rem;font-weight:700;margin-bottom:2rem;color:#222;letter-spacing:.02em}.analysis-main-grid{display:grid;grid-template-columns:1.1fr 1.2fr;gap:2.5rem;align-items:flex-start;width:100%;margin-bottom:2rem}.analysis-image-panel{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:1.2rem;border:1.5px solid #e0a96d;padding:2rem 1.2rem 1.5rem;box-shadow:0 2px 8px #0000000f;position:relative}.analysis-img{width:100%;max-width:320px;max-height:240px;border-radius:.7rem;box-shadow:0 2px 8px #00000014;border:1px solid #e0a96d;object-fit:contain;background:#fff}.color-popup-overlay{position:absolute;left:50%;bottom:0;transform:translate(-50%) translateY(2%);min-width:375px;min-height:80px;padding:.5rem 1.2rem;border-radius:0 0 .833rem .833rem;box-shadow:0 4px 16px #0000002e;display:flex;align-items:center;justify-content:center;z-index:10;color:#222;font-weight:700;font-size:1.1rem;transition:background .2s,opacity .2s}.analysis-info-panel{background:#181818;border-radius:1.2rem;padding:2rem 1.5rem 1.5rem;color:#fff;min-height:320px;box-shadow:0 2px 8px #0000000f;display:flex;flex-direction:column;gap:1.2rem}.analysis-tabs{width:100%}.tab-list{display:flex;justify-content:flex-start;gap:1.2rem;margin-bottom:1.2rem}.tab-list button{background:none;border:none;font-size:1.1rem;color:#e0a96d;padding:.5rem 1.2rem;border-radius:.5rem .5rem 0 0;cursor:pointer;transition:background .2s,color .2s}.tab-list button.active,.tab-list button:hover{background:#e0a96d;color:#222}.tab-content{background:#222;border-radius:.7rem;padding:1.2rem 1rem;color:#fff;min-height:120px}.analysis-season{font-size:1.5rem;font-style:italic;text-align:left;margin-bottom:.7rem}.analysis-section-title{font-size:1.2rem;font-style:italic;margin-bottom:.5rem;text-align:left}.swatch-slide{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-start;margin:1rem 0}.swatch-color{width:60px;height:60px;border-radius:.5rem;border:2px solid #fff;cursor:pointer;transition:border .2s,box-shadow .2s;outline:none}.swatch-color:focus,.swatch-color:hover{border:2px solid #e0a96d;box-shadow:0 0 0 2px #e0a96d44}.alert-box{background:#fff7f0;color:#222;border-radius:.7rem;padding:.01rem 1rem .7rem;margin:0 0 .5rem;font-size:.98rem;box-shadow:0 1px 4px #0000000a}.disclaimer-container{display:block;margin-top:1.2rem}.analysis-actions{display:flex;gap:1rem;margin-top:2rem;justify-content:center}.analysis-btn{padding:.7rem 1.5rem;font-size:1rem;border-radius:.6rem;border:1.5px solid #e0a96d;background:#fff;color:#b48a78;font-weight:500;cursor:pointer;transition:background .2s,color .2s}.analysis-btn:hover{background:#e0a96d;color:#222}.analysis-loading{display:flex;flex-direction:column;align-items:center;margin-top:4rem;color:#e0a96d;font-size:1.2rem}.analysis-spinner{font-size:2.2rem;margin-bottom:1rem;letter-spacing:.2em;animation:blink 1.2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.analysis-loading-message{color:#e0a96d;font-size:1.1rem;margin-top:.5rem}@media (max-width: 900px){.analysis-main-grid{grid-template-columns:1fr;gap:1.5rem}.analysis-image-panel,.analysis-info-panel{padding:1.2rem .7rem}.analysis-info-panel{margin:0 auto;width:100%;max-width:500px}.analysis-image-panel{margin:0 auto;max-width:390px;width:100%}}@media (max-width: 550px){.analysis-info-panel{margin:0 auto;width:100%;max-width:400px}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}