:root{--bg-color:#f0f4f8;--primary-color:#4a90e2;--secondary-color:#ff6b6b;--text-color:#333;--light-text-color:#fff;--border-color:#d1d9e6;--shadow-color:rgba(0, 0, 0, 0.1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Poppins',sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem}.app-container{width:100%;max-width:1200px;background:#fff;border-radius:20px;box-shadow:0 10px 30px var(--shadow-color);overflow:hidden}header
h1{font-size:2.5rem;font-weight:700;margin-bottom:0.5rem}.main-content{display:flex;flex-wrap:wrap;padding:2rem;gap:2rem}.controls-panel{flex:1;min-width:300px;display:flex;flex-direction:column;gap:1.5rem}.controls-panel
h2{font-size:1.5rem;color:var(--primary-color);border-bottom:2px solid var(--border-color);padding-bottom:0.5rem}.input-group
label{display:block;margin-bottom:0.5rem;font-weight:600}textarea{width:100%;padding:0.75rem;border-radius:8px;border:1px
solid var(--border-color);font-family:'Poppins',sans-serif;font-size:1rem;resize:vertical;transition:border-color 0.3s, box-shadow 0.3s}textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(74, 144, 226, 0.2)}.preset-buttons{display:flex;flex-wrap:wrap;gap:1rem}.preset-buttons
button{flex:1;padding:0.75rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color 0.3s, transform 0.2s}#boy-names-btn{background-color:var(--primary-color);color:var(--light-text-color)}#girl-names-btn{background-color:var(--secondary-color);color:var(--light-text-color)}#mixed-names-btn{background-color:#607D8B;color:var(--light-text-color);width:100%;display:none}.preset-buttons button:hover{transform:translateY(-2px)}.options{display:flex;align-items:center;gap:0.5rem}#twins-mode{width:1.2em;height:1.2em;cursor:pointer;accent-color:var(--primary-color)}.spin-button{padding:1rem;font-size:1.5rem;font-weight:700;color:var(--light-text-color);background:linear-gradient(135deg, #6dd5ed, #2193b0);border:none;border-radius:8px;cursor:pointer;transition:transform 0.2s, box-shadow 0.3s;box-shadow:0 4px 15px rgba(0, 0, 0, 0.2)}.spin-button:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0, 0, 0, 0.3)}.spin-button:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.wheel-container{flex:1.5;display:flex;justify-content:center;align-items:center;position:relative;min-height:400px}.wheel-pointer{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:40px solid #333;position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:10;filter:drop-shadow(0 2px 2px var(--shadow-color))}#wheel-canvas{transition:transform 5s cubic-bezier(0.25, 0.1, 0.25, 1)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.6);display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;z-index:1000}.modal-overlay.show{opacity:1;visibility:visible}.modal-content{background:#fff;padding:2rem 3rem;border-radius:15px;text-align:center;position:relative;transform:scale(0.9);transition:transform 0.3s;box-shadow:0 5px 15px rgba(0,0,0,0.3)}.modal-overlay.show .modal-content{transform:scale(1)}.close-btn{position:absolute;top:10px;right:20px;font-size:2rem;color:#aaa;cursor:pointer;transition:color 0.3s}.close-btn:hover{color:#333}#winner-name{font-size:2rem;color:var(--secondary-color);margin-top:1rem;word-break:break-word}@media (max-width: 900px){.main-content{flex-direction:column-reverse;align-items:center}.wheel-container{width:100%;max-width:400px}#wheel-canvas{width:100%;height:auto}}@media (max-width: 480px){body{padding:1rem}header
h1{font-size:2rem}.main-content,header,.modal-content{padding:1.5rem}}.preset-buttons.twins-active #mixed-names-btn{display:block}