body{color:#121212;background-color:#fff;margin:0;font-family:Arial,sans-serif}main{flex-direction:column;gap:12px;max-width:360px;min-height:100vh;margin:0 auto;padding:16px;display:flex}.skills-grid{grid-template-columns:repeat(3,1fr);gap:14px;max-width:320px;margin:0 auto;display:grid}.skill-button{cursor:pointer;width:100%;height:44px;transform:all .2s ease;background:#fff;border:2px solid;border-radius:999px;justify-content:center;align-items:center;margin-top:16px;font-size:.95rem;font-weight:500;display:flex}.skill-button:hover{opacity:.9;transform:translateY(-2px)}.skill-button.selected{font-weight:600;transform:scale(1.02);box-shadow:0 4px 10px #0000001a}.skill-button:disabled{opacity:.4;cursor:not-allowed}.selected-colors-preview{justify-content:center;gap:12px;margin:12px 0 4px;display:flex}.color-dot{border:2px solid #1b2a6b;border-radius:999px;width:18px;height:18px;display:inline-block}.mocktail-image{width:100%;max-width:140px;height:auto;margin:16px auto;display:block}button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:12px;min-height:44px;padding:12px 16px}.glass-wrapper{flex-direction:column;align-items:center;margin:16px 0;display:flex}.glass{background:#fff;border:3px solid #111;flex-direction:column-reverse;width:160px;height:220px;display:flex;overflow:hidden}.developer .glass{border-radius:0 0 24px 24px}.designer .glass{clip-path:polygon(50% 0%,100% 100%,0% 100%)}.layer{flex:1}.stem{background:#111;width:6px;height:70px}.base{background:#111;border-radius:999px;width:90px;height:8px}ul{padding-left:20px}