html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:root{--primary-color: #00a8ff;--dark-bg: #FFFFC5;--light-bg: #f0f0f0;--text-light: #000000;--text-dark: #333333}header{width:100%;backdrop-filter:blur(10px);padding:5px 5%;display:flex;justify-content:space-between;align-items:center}.nav-links a:not(.btn){color:var(--text-light)}.nav-links{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;min-width:0}.nav-links a:not(.btn){text-decoration:none;margin-left:20px;font-weight:400;transition:color .3s ease;flex-shrink:0}.nav-buttons{display:flex;align-items:center;margin-left:20px;flex-shrink:0}.nav-buttons .btn{margin-left:15px}.nav-links a:hover:not(.btn){color:var(--primary-color)}.btn{padding:8px 20px;border-radius:5px;text-decoration:none;font-weight:600;transition:opacity .3s ease}.btn:hover{opacity:.85}.hamburger{display:none;cursor:pointer;flex-direction:column;gap:4px}.hamburger .bar{width:25px;height:3px;border-radius:5px;transition:all .3s ease-in-out}.main-header{background-color:#6a0dad;color:#fff;padding:10px 20px;text-align:center;box-shadow:0 2px 5px #0003;display:flex;justify-content:space-between;align-items:center}.nav-bar a{text-decoration:none}.nav-bar{display:flex;gap:15px;margin-left:auto;margin-right:25px}.nav-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;position:relative}.nav-bar button:nth-child(1) i,.nav-bar a:nth-child(1) i{color:#ffde59}.nav-bar button:nth-child(2) i,.nav-bar a:nth-child(2) i{color:#ff7b7b}.nav-bar button:nth-child(3) i,.nav-bar a:nth-child(3) i{color:#b388ff}.nav-bar button:nth-child(4) i,.nav-bar a:nth-child(4) i{color:#ff9a28}.nav-bar button:nth-child(5) i,.nav-bar a:nth-child(5) i{color:#80d8ff}.nav-bar button:nth-child(6) i,.nav-bar a:nth-child(6) i{color:#a7ff83}.main-header h1{margin:0;font-size:1.5em;font-weight:700;letter-spacing:1px;background:linear-gradient(45deg,#ffde59,#ff7b7b,#b388ff,#80d8ff,#a7ff83);-webkit-background-clip:text;background-clip:text;color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;flex-direction:column;min-height:100vh}main{flex:1}#loading-container{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:400px;background-color:#ffffff80;border:2px solid #fff;border-radius:10px;overflow:visible;z-index:100;padding:4px}#loading-bar{width:0%;height:20px;background-color:#ff6b6b;transition:width .2s ease-out,background-color .5s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;border-radius:6px}#loading-message{color:#333;text-align:center;margin-top:8px;font-size:14px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#playground-container{width:100%;height:60vh;position:relative;background:linear-gradient(to bottom,#a2d2ff 40%,#90be6d 60%)}#model-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.ui-overlay{position:absolute;inset:0;pointer-events:none;z-index:20}.ui-overlay>*{pointer-events:auto}#action-bar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#fffc;backdrop-filter:blur(10px);border-radius:30px;padding:10px;display:flex;gap:10px;box-shadow:0 4px 15px #0000001a;flex-wrap:wrap;justify-content:center}#action-bar button{background:#ffafcc;color:#fff;border:none;border-radius:20px;padding:10px 20px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease}#action-bar button:hover{transform:translateY(-2px);box-shadow:0 2px 8px #00000026}.panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:25px;border-radius:16px;box-shadow:0 5px 20px #0003;width:90%;max-width:300px;display:none;flex-direction:column;gap:15px}.panel.show{display:flex}.panel h3{margin:0;text-align:center;color:#333}.panel.panel-right{left:auto;right:20px;transform:translateY(-50%)}#sing-panel,#talk-panel,#dance-panel{width:220px;height:auto;font-size:12px;gap:8px;padding:15px;background-color:#ffffff1a;backdrop-filter:blur(5px)}#sing-panel h3,#talk-panel h3,#dance-panel h3{font-size:1.2em;text-align:center;margin:0 0 2px}#sing-panel button,#talk-panel button,#dance-panel button{padding:3px 6px;font-size:11px;cursor:pointer}.control-group{display:flex;flex-direction:column;gap:4px;padding:8px;background-color:#f0f0f040;border-radius:6px}.control-group label{font-weight:700;font-size:1.1em;color:#333;margin-bottom:3px}.control-group-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.toggle-collapse{background:#ddd;border:none;border-radius:50%;width:20px;height:20px;font-weight:700;line-height:18px;padding:0}.collapsible-content.collapsed{display:none}#sing-panel audio{width:100%;height:28px}.button-bar{display:flex;gap:4px;align-items:center}.button-bar button{flex-grow:1}#sing-panel input[type=file]{font-size:10px;max-width:110px}#character-creation-section,#features-section{padding:50px 20px;text-align:center;font-family:Arial,sans-serif;color:#333}#character-creation-section h2,#features-section h2{font-size:2.5em;margin-bottom:20px;color:#4a4a4a}#character-creation-section p,#features-section p{font-size:1.2em;max-width:800px;margin:0 auto 30px;line-height:1.6}.call-to-action-button{background-color:#ff6b6b;color:#fff;padding:15px 30px;border:none;border-radius:8px;font-size:1.1em;font-weight:700;cursor:pointer;text-decoration:none;transition:background-color: .3s ease}.call-to-action-button:hover{background-color:#ff4c4c}.header-button{background-color:#ffafcc;color:#fff;border:none;border-radius:20px;padding:10px 20px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .2s ease;margin-top:15px}.header-button:hover{transform:translateY(-2px);box-shadow:0 2px 8px #00000026}main{flex:1;min-height:0;display:flex;flex-direction:column}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto}.feature-item{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 4px 25px #0000001a;transition:all .3s ease;border:2px solid #e0e0e0;display:flex;flex-direction:column}.feature-item:hover{transform:translateY(-5px);box-shadow:0 6px 30px #00000026}.feature-item.highlighted{border-color:var(--primary-color)}.feature-item h3{font-size:1.5em;color:#333;margin-bottom:15px}.feature-item p{font-size:1em;line-height:1.5;color:#555}.feature-item .btn{width:100%;box-sizing:border-box;margin-top:auto;padding:15px;font-size:1.1em}footer{background-color:#333;color:#fff;text-align:center;padding:20px 0;font-size:.9em}@media (max-width: 992px){.nav-links{display:none;position:absolute;top:100%;left:0;width:100%;flex-direction:column;align-items:stretch;background-color:#ffebeef2;padding:10px 0}.nav-links.active{display:flex!important;z-index:101}.nav-links a{margin:10px 20px;text-align:center}.hamburger{display:flex;margin-right:20px}.hamburger .bar{background-color:#000}}@media (max-width: 768px){.main-header h1{font-size:1.2em}.nav-bar{gap:5px;margin-right:10px;flex-wrap:wrap;justify-content:flex-end}.nav-button{font-size:20px}#instructions{top:20px;left:auto;right:20px;font-size:10px;padding:4px 8px}#action-bar{inset:50% 10px auto auto;transform:translateY(-50%);flex-direction:column;width:auto;padding:10px;gap:10px}#toggle-anchor-btn{display:block}.anchor-top .panel.panel-right,.anchor-center .panel.panel-right,.anchor-bottom .panel.panel-right{inset:50% auto auto 50%;transform:translate(-50%,-50%)}#sing-panel,#talk-panel,#dance-panel{width:90%;height:auto}}.panel-close{position:absolute;top:10px;right:10px;background:#eee;border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-weight:700}#dance-choice-container button{background:#bde0fe;color:#333;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}#playground-container:fullscreen #model-container,#playground-container.ios-fullscreen #model-container{height:100vh}#playground-container.ios-fullscreen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999}#instructions{position:absolute;top:20px;left:20px;background:#0006;color:#fff;padding:8px 12px;border-radius:8px;font-size:14px}#fullscreen-btn{position:absolute;bottom:20px;right:20px;background:#fffc;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;line-height:40px;text-align:center;cursor:pointer;box-shadow:0 2px 8px #00000026;z-index:10}#title-screen{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;perspective:800px;transition:opacity 1.5s ease-out}#title-screen.hidden{opacity:0;pointer-events:none}.title-text{position:absolute;top:50%;left:50%;margin:0;text-align:center;font-family:Comic Sans MS,Chalkduster,Marker Felt,sans-serif;font-size:clamp(2rem,8vw,5rem);color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);animation:y-axis-swing 8s ease-in-out infinite;transform-style:preserve-3d}@keyframes y-axis-swing{0%{transform:translate(-50%,-50%) rotateY(-20deg)}50%{transform:translate(-50%,-50%) rotateY(20deg)}to{transform:translate(-50%,-50%) rotateY(-20deg)}}