:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.home-container{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(to bottom,#0f172a,#1e293b,#334155);position:relative;overflow:hidden}.home-container:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.15) 0%,transparent 70%);top:-200px;right:-200px;border-radius:50%}.home-container:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(236,72,153,.1) 0%,transparent 70%);bottom:-150px;left:-150px;border-radius:50%}.home-content{max-width:1200px;width:100%;text-align:center;position:relative;z-index:1}.hero-section{margin-bottom:3rem;animation:fadeInUp .8s ease-out}.hero-title{font-size:4rem;font-weight:800;margin-bottom:1rem;color:#f1f5f9;letter-spacing:-.02em;position:relative;display:inline-block}.hero-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60%;height:4px;background:linear-gradient(90deg,transparent,#3b82f6,#ec4899,transparent);border-radius:2px}.hero-subtitle{font-size:1.25rem;color:#94a3b8;max-width:600px;margin:1.5rem auto 0;line-height:1.6;font-weight:300}.cta-section{margin-bottom:4rem;animation:fadeInUp .8s ease-out .2s backwards}.primary-button{background:#0ea5e9;color:#fff;border:2px solid transparent;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;position:relative;overflow:hidden}.primary-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.primary-button:hover:before{left:100%}.primary-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0ea5e966;border-color:#0ea5e9;background:#0284c7}.primary-button:active{transform:translateY(0)}.button-icon{font-size:1.3rem}.features-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:3rem;animation:fadeInUp .8s ease-out .4s backwards}.feature-card{background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:2rem;border:1px solid rgba(148,163,184,.2);transition:all .3s ease;position:relative}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#ec4899,#f59e0b);opacity:0;transition:opacity .3s ease}.feature-card:hover:before{opacity:1}.feature-card:hover{transform:translateY(-5px);background:#1e293bcc;border-color:#94a3b866;box-shadow:0 10px 30px #0000004d}.feature-icon{font-size:3rem;margin-bottom:1rem;filter:grayscale(.3)}.feature-card h3{font-size:1.5rem;margin-bottom:.5rem;color:#f1f5f9;font-weight:600}.feature-card p{font-size:1rem;color:#94a3b8;margin:0;font-weight:300}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media (max-width: 768px){.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1rem}.features-section{grid-template-columns:1fr;gap:1.5rem}}.canvas-editor-container{width:100%;padding:2rem;background:linear-gradient(to bottom,#0f172a,#1e293b,#334155);min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.canvas-editor-container:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.15) 0%,transparent 70%);top:-200px;right:-200px;border-radius:50%;z-index:0}.canvas-editor-container:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(236,72,153,.1) 0%,transparent 70%);bottom:-150px;left:-150px;border-radius:50%;z-index:0}.canvas-header{width:100%;max-width:1000px;text-align:center;margin-bottom:1.5rem;animation:fadeInDown .6s ease-out;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}.canvas-subtitle{color:#f1f5f9;font-size:1.2rem;margin-bottom:.8rem;font-weight:500;position:relative;display:inline-block}.canvas-subtitle:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:50%;height:2px;background:linear-gradient(90deg,transparent,#3b82f6,#ec4899,transparent);border-radius:2px}.page-navigation{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:1rem;padding:.5rem 1rem;background:#0f172a66;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeInUp .8s ease-out}.home-link{color:#94a3b8;text-decoration:none;font-size:.9rem;padding:.4rem .8rem;border-radius:6px;transition:all .2s ease;background:#1e293b99;border:1px solid rgba(148,163,184,.2)}.home-link:hover{color:#f1f5f9;background:#3b82f64d;border-color:#3b82f666;transform:translateY(-2px)}.canvas-session-info{color:#94a3b8;font-size:.9rem;padding:.4rem .8rem;border-radius:6px;background:#1e293b99;border:1px solid rgba(148,163,184,.2)}.canvas-editor-content{width:100%;max-width:1000px;position:relative;z-index:1;animation:fadeInUp .8s ease-out}.canvas-editor-main{display:flex;flex-direction:column;gap:1rem;width:100%;position:relative}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0f172acc;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;border-radius:12px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.loading-spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.2);border-top:5px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.loading-overlay p{color:#f1f5f9;font-weight:500;font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.canvas-id-indicator{font-size:.8rem;color:#94a3b8;text-align:center;margin-bottom:.5rem;padding:.3rem .5rem;background-color:#0f172a66;border-radius:4px;display:inline-block;align-self:center}.sync-status{position:fixed;top:20px;right:20px;padding:.6rem 1rem;border-radius:8px;color:#fff;font-weight:500;z-index:1000;box-shadow:0 4px 10px #0003;animation:fadeInRight .3s ease-out,fadeOutRight .3s ease-in 2.7s forwards;display:flex;align-items:center;gap:8px}.sync-status:before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%}.sync-status.success{background:#22c55ee6;border-left:3px solid rgb(21,128,61)}.sync-status.success:before{background-color:#fff;box-shadow:0 0 0 2px #ffffff80}.sync-status.error{background:#ef4444e6;border-left:3px solid rgb(185,28,28)}.sync-status.error:before{background-color:#fff}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;background:#1e293bcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem;border-radius:12px;border:1px solid rgba(148,163,184,.2);margin-bottom:1rem;box-shadow:0 4px 6px #0000001a}.tool-button{background-color:#0f172a99;color:#f1f5f9;border:1px solid rgba(148,163,184,.2);border-radius:8px;padding:.6em 1em;font-size:.9em;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.4rem;min-width:100px;text-align:center}.tool-button:hover{background-color:#1e293be6;border-color:#3b82f680;transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.tool-button.active{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.tool-button:focus{outline:none;box-shadow:0 0 0 2px #3b82f680}.controls-section{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:1rem;background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem;border-radius:12px;border:1px solid rgba(148,163,184,.2)}.color-picker-container{display:flex;align-items:center;gap:.8rem;background-color:#0f172a99;border-radius:8px;padding:.5rem 1rem;border:1px solid rgba(148,163,184,.2)}.color-label{color:#f1f5f9;font-size:.9rem;display:flex;align-items:center;gap:.8rem;font-weight:500}.color-input{width:35px;height:35px;border:none;border-radius:8px;cursor:pointer;background:none;position:relative;padding:0;overflow:hidden}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:6px;box-shadow:0 0 0 2px #ffffff4d}.delete-button{background-color:#ef444433;color:#f1f5f9;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.6em 1.2em;font-size:.9em;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.delete-button:hover:not(:disabled){background-color:#ef444466;transform:translateY(-2px)}.delete-button:disabled{opacity:.5;cursor:not-allowed}.text-editor{display:flex;align-items:center;gap:10px;width:100%;animation:fadeIn .3s ease-out}.text-input{flex:1;padding:.6em 1em;font-size:.9rem;border:1px solid rgba(148,163,184,.3);border-radius:8px;background:#0f172a99;color:#f1f5f9;transition:all .2s ease}.text-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f64d}.update-text-button{background-color:#3b82f6;color:#fff;border:none;border-radius:8px;padding:.6em 1.2em;font-size:.9em;font-weight:500;cursor:pointer;transition:all .2s ease}.update-text-button:hover{background-color:#2563eb;transform:translateY(-2px)}.canvas-wrapper{background-color:#0f172ab3;border-radius:8px;padding:1rem;border:1px solid rgba(148,163,184,.2);box-shadow:0 10px 30px #0003;display:inline-block;margin:0 auto;transition:all .3s ease;position:relative;z-index:5}.canvas-wrapper canvas{box-shadow:0 0 8px #0000004d;display:block;visibility:visible!important;opacity:1!important;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.tips-section{margin-top:2rem;padding:1.5rem;background:#1e293b99;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;border:1px solid rgba(148,163,184,.2);color:#f1f5f9;max-width:1000px;width:100%;animation:fadeInUp .8s ease-out .4s backwards}.tips-title{font-size:1.2rem;color:#f1f5f9;font-weight:600;margin-bottom:1rem}.tips-list{list-style-type:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 2rem}.tips-list li{color:#94a3b8;font-size:.9rem;padding-left:1.5rem;position:relative;line-height:1.6}.tips-list li:before{content:"•";position:absolute;left:0;color:#3b82f6;font-size:1rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 900px){.canvas-editor-container{padding:1rem}.canvas-title{font-size:2rem}.toolbar{justify-content:center}.canvas-wrapper{max-width:100%;overflow-x:auto}}@media (max-width: 600px){.controls-section{flex-direction:column;align-items:stretch}.color-picker-container{justify-content:space-between}.text-editor{flex-direction:column}.tips-list{grid-template-columns:1fr}}