.home-page{z-index:1000}.grand-container{display:flex;flex-direction:column;row-gap:60px}.models-container{width:95%;margin:0 auto}.models-container>.container{width:100%;display:flex;flex-wrap:wrap;column-gap:20px;row-gap:20px;margin:20px}.models-container a{color:#000;text-decoration:none}.models-container .model{width:250px;height:150px;border-radius:12px;box-shadow:0 0 6px 1px silver;padding:10px;background-color:#f3f3f3}#tsparticles{position:relative;z-index:-1}@media screen and (min-width: 1440px){.models-container>.container{column-gap:30px;row-gap:30px;margin:20px}.models-container .model{width:19.53125vw;height:calc((100vw / 5.12) / 1.6)}}@media screen and (max-width: 550px){.models-container>.container{margin:20px 0;justify-content:center}}:root{--primary-color: #2e51a2;--primary-hover: #1d3b8b;--background: #f5f5f5;--text-primary: #333;--text-secondary: #666;--accent: #e4b321}.page{padding:20px;width:100%;max-width:1200px;margin:0 auto}.page>h3{margin:20px 0;font-weight:500;color:var(--text-primary)}.page>div{width:100%;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:30px}.recommendations{padding:20px;background:white;border-radius:8px;box-shadow:0 2px 8px #0000000d}.recommend-btn{background:var(--primary-color);color:#fff;border:none;padding:12px 24px;font-size:1rem;border-radius:6px;cursor:pointer;transition:background .2s,transform .1s;margin-bottom:20px}.recommend-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.recommendations-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.recommendation{display:flex;flex-direction:column;background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a;transition:transform .2s;border:1px solid rgba(0,0,0,.1)}.recommendation:hover{transform:translateY(-4px)}.recommendation img{width:100%;height:200px;object-fit:cover}.recommendation>div{padding:15px;display:flex;flex-direction:column;gap:10px}.recommendation h4{margin:0;font-size:1.2rem;color:var(--primary-color);line-height:1.4}.recommendation p{margin:0;color:var(--text-secondary);line-height:1.6;font-size:.95rem}.recommendation span{color:var(--accent);font-weight:700;font-size:1.1rem}.recommendation a{color:var(--primary-color);text-decoration:none;font-size:.9rem;word-break:break-all}.recommendation a:hover{text-decoration:underline}.profiles{background:var(--background);padding:20px;border-radius:8px;box-shadow:0 2px 8px #0000000d}.profiles>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(0,0,0,.1)}.profiles h4{margin:0;color:var(--text-primary);font-size:1.2rem}.create-profile{background:var(--primary-color);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.9rem}.create-profile:hover{background:var(--primary-hover);transform:translateY(-1px)}.sample-profiles-list{display:grid;gap:12px}.sample-profile{background:white;padding:15px 20px;border-radius:6px;cursor:pointer;transition:all .2s;border:1px solid rgba(0,0,0,.1)}.sample-profile:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.sample-profile.selected{background:var(--primary-color);border-color:var(--primary-color)}.sample-profile h3{margin:0;color:var(--text-primary);font-size:1.1rem;font-weight:500;pointer-events:none}.sample-profile.selected h3{color:#fff}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:25px;border-radius:12px;box-shadow:0 4px 20px #00000026;width:90%;max-width:600px;max-height:85vh;z-index:1000;display:flex;flex-direction:column;gap:20px;border:none}.popup .container{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;padding-right:10px}.popup .container::-webkit-scrollbar{width:8px}.popup .container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popup .container::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.popup .s-a{display:flex;flex-direction:column;gap:10px;text-align:center}.popup .s-a img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:6px;transition:transform .2s}.popup .s-a img:hover{transform:scale(1.02)}.popup .s-a h4{margin:0;font-size:.9rem;color:var(--text-primary);line-height:1.4}.popup .btns-container{display:flex;justify-content:flex-end;gap:12px}.popup button{padding:8px 20px;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;transition:all .2s}.popup .close{background:var(--background);color:var(--text-primary)}.popup .close:hover{background:#e0e0e0}.popup .set-unset{background:var(--primary-color);color:#fff}.popup .set-unset:hover{background:var(--primary-hover)}.popup .input-container{display:flex;gap:12px}.popup input{flex:1;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:.95rem;transition:border-color .2s}.popup input:focus{outline:none;border-color:var(--primary-color)}.anime-loading{display:flex;justify-content:center;align-items:center;min-height:200px}.anime-loading-center{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:1000;width:max-content;height:max-content}.anime-loading-spinner{position:relative;display:inline-block}.anime-loading .loading-circle{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s cubic-bezier(.5,0,.5,1) infinite}.anime-loading .loading-circle:nth-child(1){animation-delay:-.45s}.anime-loading .loading-circle:nth-child(2){animation-delay:-.3s}.anime-loading .loading-circle:nth-child(3){animation-delay:-.15s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1000px){.page>div{grid-template-columns:1fr}.profiles{order:-1}}@media (max-width: 600px){.page{padding:10px}.recommendations-list{grid-template-columns:1fr}.popup{padding:15px;width:95%}.popup .container{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.recommendation{flex-direction:column}.recommendation img{height:180px}.recommendation>div{padding:12px}}.page{width:100%;min-height:100vh;position:relative;padding:30px 20px;display:flex;flex-direction:column;gap:2rem;background-color:#f5f5f5}.page>a{margin:0;text-decoration:none;transition:color .3s}.page>a:hover{color:#6cb8e0!important}.page>.container{width:100%;max-width:800px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:white;border-radius:12px;box-shadow:0 2px 8px #0000001a}canvas#canvas{width:100%;height:80px;display:block;border-radius:8px;background-color:#f3f3f3;margin:1rem 0}.container>div:nth-child(2){width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:2rem;position:relative}.notes{width:100%;height:auto;background-color:#f8f9fa;border-radius:8px;padding:1rem;box-shadow:0 1px 3px #0000000d}.notes>div:nth-child(1),.notes>div:nth-child(1)>span{height:max-content;display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}.notes>div:nth-child(1)>h3{font-size:1.2rem;color:#333}.notes>div:nth-child(1)>span{transition:.3s;cursor:pointer;background:#6cb8e0;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.notes>div:nth-child(1)>span>svg{pointer-events:none;color:#fff}.notes>div:nth-child(1)>span.flip{transform:rotate(180deg)}.notes>div:nth-child(2){height:0px;overflow:hidden;transition:.3s}.notes ul{list-style-position:inside;margin:.5rem 0;font-size:1rem;color:#555}.notes ul>li{margin:.8rem 0;line-height:1.4}.btns{width:max-content;display:flex;gap:1rem;align-items:center;justify-content:center;padding:1rem}.btns>button{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#6cb8e0;cursor:pointer;border:none;transition:all .3s ease;box-shadow:0 2px 8px #6cb8e04d}.record{font-size:32px;color:#fff;position:relative}.record svg{pointer-events:none;transition:transform .2s ease}.record:hover svg{transform:scale(1.1)}.record.mouse-down:after{content:"Speak";position:absolute;left:50%;top:120%;transform:translate(-50%);font-size:.9em;color:#333;font-weight:500;white-space:nowrap}.stop-play{padding:15px!important}.square{width:24px;height:24px;background-color:#fff;border-radius:3px}.btns>button.mouse-down{background-color:#5aa2c8;transform:scale(.95)}.page>.msg-container{width:100%;max-width:800px;margin:0 auto;flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column-reverse;align-items:start;gap:1rem;padding:1rem;background:white;border-radius:12px;box-shadow:0 2px 8px #0000001a}.page>.msg-container::-webkit-scrollbar{width:6px}.page>.msg-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:999px}.page>.msg-container::-webkit-scrollbar-thumb{background-color:#6cb8e0;border-radius:999px}.page>.msg-container::-webkit-scrollbar-thumb:hover{background-color:#5aa2c8}.page>.msg-container>.urls-container{width:100%;max-width:400px;height:max-content;min-height:100px;background-color:#f8f9fa;padding:1rem;border-radius:8px;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 1px 3px #0000000d}.page>.msg-container>.urls-container>a{color:#6cb8e0;text-decoration:none;transition:color .2s;line-height:1.4}.page>.msg-container>.urls-container>a:hover{color:#5aa2c8;text-decoration:underline}.page>.msg-container>.urls-container>a{display:block;margin:10px 0;word-wrap:break-word}.none-btn{display:none!important}@media screen and (max-width: 545px){.notes{top:100%}}*{padding:0;margin:0;box-sizing:border-box}body{width:100%;height:max-content;min-height:100vh;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;background-color:#f3f3f3;position:relative}#root{width:95%;height:max-content;margin:0 auto;position:relative;top:2.5vw}:root{--h1: 2em;--h2: 1.5em;--h3: 1.17em;--h4: 1em}h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}h4,p{font-size:var(--h4);font-weight:500}.loading{background-color:#f3f3f3;border-radius:50%;position:relative;text-align:center;align-content:center;margin:20px}.loading:before{content:"";position:absolute;background-color:#d4d4d4c6;width:100%;height:100%;z-index:-1;border-radius:50%;padding:4px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0);background-image:conic-gradient(from 0turn,#9ba9b1 20%,transparent 20%);animation-name:spin;animation-iteration-count:infinite;animation-duration:.7s;animation-timing-function:linear}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@media screen and (min-width: 1440px){:root{--h1:2.5vw;--h2:1.875vw;--h3:1.4625vw;--h4:1.25vw}}
